EN
jQuery - scroll to element
8 points
In this article, we would like to show you how to scroll to the element using jQuery.
Using jQuery it is possible to scroll to the element placed on a web page in the following ways:
xxxxxxxxxx1
var element= $('my-element-css-selector');2
var offset = element.offset();3
4
var root = $('html');5
6
root.scrollLeft(offset.left);7
root.scrollTop(offset.top);xxxxxxxxxx1
var element= $('my-element-css-selector');2
var offset = element.offset();3
4
var config = {5
scrollLeft: offset.left,6
scrollTop: offset.top7
};8
9
var duration = 200; // in milliseconds10
11
$('html').animate(config, duration);Bellow full examples of how to scroll web page have been presented.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.article {7
margin: 10px 0;8
padding: 0 10px;9
border: 1px solid green;10
width: 1000px; height: 600px;11
}12
13
</style>14
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>15
<script>16
17
function scrollTo(selector) {18
var article = $(selector);19
var offset = article.offset();20
21
var root = $('html');22
23
/*24
// ALTERNATIVELY:25
26
var html = document.documentElement;27
var body = document.body;28
29
var root = $([html, body]).30
31
// or 32
33
var root = $('html, body')34
*/35
36
root.scrollLeft(offset.left);37
root.scrollTop(offset.top);38
}39
40
</script>41
</head>42
<body>43
<div class="outline">44
<h2>Outline:</h2>45
<a href="javascript:scrollTo('.article-1')">Article 1</a><br />46
<a href="javascript:scrollTo('.article-2')">Article 2</a><br />47
</div>48
<div class="article article-1">49
<h3>Article 1</h3>50
<p>51
This is article 1 text...<br />52
This is article 1 text...<br />53
This is article 1 text...<br />54
This is article 1 text...<br />55
This is article 1 text...<br />56
</p>57
</div>58
<div class="article article-2">59
<h3>Article 2</h3>60
<p>61
This is article 2 text...<br />62
This is article 2 text...<br />63
This is article 2 text...<br />64
This is article 2 text...<br />65
This is article 2 text...<br />66
</p>67
</div>68
</body>69
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.article {7
margin: 10px 0;8
padding: 0 10px;9
border: 1px solid green;10
width: 1000px; height: 600px;11
}12
13
</style>14
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>15
<script>16
17
function scrollTo(selector) {18
var article = $(selector);19
var offset = article.offset();20
21
var config = {22
scrollLeft: offset.left,23
scrollTop: offset.top24
};25
26
var duration = 200; // in millisecoonds27
28
$('html').animate(config, duration);29
30
/*31
// ALTERNATIVELY:32
33
var html = document.documentElement;34
var body = document.body;35
36
$([html, body]).animate(config, duration);37
38
// or 39
40
$('html, body').animate(config, duration);41
*/42
}43
44
</script>45
</head>46
<body>47
<div class="outline">48
<h2>Outline:</h2>49
<a href="javascript:scrollTo('.article-1')">Article 1</a><br />50
<a href="javascript:scrollTo('.article-2')">Article 2</a><br />51
</div>52
<div class="article article-1">53
<h3>Article 1</h3>54
<p>55
This is article 1 text...<br />56
This is article 1 text...<br />57
This is article 1 text...<br />58
This is article 1 text...<br />59
This is article 1 text...<br />60
</p>61
</div>62
<div class="article article-2">63
<h3>Article 2</h3>64
<p>65
This is article 2 text...<br />66
This is article 2 text...<br />67
This is article 2 text...<br />68
This is article 2 text...<br />69
This is article 2 text...<br />70
</p>71
</div>72
</body>73
</html>