EN
jQuery - scroll to element
8
points
In this article, we would like to show you how to scroll to the element using jQuery.
1. Overview
Using jQuery it is possible to scroll to the element placed on a web page in the 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 of how to scroll web page have 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>