EN
jQuery - how to scroll to element?
8
points
1. Overview
Using jQuery it is possible to scroll to element placed on web page in following ways:
1.1. without animation
var element= $('my-element-css-selector');
var offset = element.offset();
var root = $('html');
root.scrollLeft(offset.left);
root.scrollTop(offset.top);1.2. with animation
var element= $('my-element-css-selector');
var offset = element.offset();
var config = {
scrollLeft: offset.left,
scrollTop: offset.top
};
var duration = 200; // in milliseconds
$('html').animate(config, duration);Bellow full examples how to scroll web page has been presented.
2. scrollLeft and scrollTop methods full example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.article {
margin: 10px 0;
padding: 0 10px;
border: 1px solid green;
width: 1000px; height: 600px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
function scrollTo(selector) {
var article = $(selector);
var offset = article.offset();
var root = $('html');
/*
// ALTERNATIVELY:
var html = document.documentElement;
var body = document.body;
var root = $([html, body]).
// or
var root = $('html, body')
*/
root.scrollLeft(offset.left);
root.scrollTop(offset.top);
}
</script>
</head>
<body>
<div class="outline">
<h2>Outline:</h2>
<a href="javascript:scrollTo('.article-1')">Article 1</a><br />
<a href="javascript:scrollTo('.article-2')">Article 2</a><br />
</div>
<div class="article article-1">
<h3>Article 1</h3>
<p>
This is article 1 text...<br />
This is article 1 text...<br />
This is article 1 text...<br />
This is article 1 text...<br />
This is article 1 text...<br />
</p>
</div>
<div class="article article-2">
<h3>Article 2</h3>
<p>
This is article 2 text...<br />
This is article 2 text...<br />
This is article 2 text...<br />
This is article 2 text...<br />
This is article 2 text...<br />
</p>
</div>
</body>
</html>3. animate method full example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.article {
margin: 10px 0;
padding: 0 10px;
border: 1px solid green;
width: 1000px; height: 600px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
function scrollTo(selector) {
var article = $(selector);
var offset = article.offset();
var config = {
scrollLeft: offset.left,
scrollTop: offset.top
};
var duration = 200; // in millisecoonds
$('html').animate(config, duration);
/*
// ALTERNATIVELY:
var html = document.documentElement;
var body = document.body;
$([html, body]).animate(config, duration);
// or
$('html, body').animate(config, duration);
*/
}
</script>
</head>
<body>
<div class="outline">
<h2>Outline:</h2>
<a href="javascript:scrollTo('.article-1')">Article 1</a><br />
<a href="javascript:scrollTo('.article-2')">Article 2</a><br />
</div>
<div class="article article-1">
<h3>Article 1</h3>
<p>
This is article 1 text...<br />
This is article 1 text...<br />
This is article 1 text...<br />
This is article 1 text...<br />
This is article 1 text...<br />
</p>
</div>
<div class="article article-2">
<h3>Article 2</h3>
<p>
This is article 2 text...<br />
This is article 2 text...<br />
This is article 2 text...<br />
This is article 2 text...<br />
This is article 2 text...<br />
</p>
</div>
</body>
</html>
