In this article, we will use the scrollTop() method of jQuery to scroll the page in different scenarios as discussed below:
Using the scrollTop with height() method
In this approach, we will use the scrollTop() method with the height() method to scroll the page.
Syntax:
S('element_selector').scrollTop($('element_selector).height());
Example: The below example uses the scrollTop() method with the height method.
<!DOCTYPE html> < html >
< head >
< title >Scroll Automatically</ title >
< script src =
</ script >
<!-- jQuery code to show the working of this method -->
< script >
$(document).ready(function () {
$("button").click(function () {
$(document).scrollTop($(document).
height());
});
});
</ script >
< style >
h2 {
color: green;
}
</ style >
</ head >
< body >
< center >
< div >
< h1 >
Click the below button
to scroll the page.
</ h1 >
< button >Scroll Page</ button >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
</ div >
</ center >
</ body >
</ html >
|
Output:
Using scrollTop with animate() method
The scrollTop method can also be used with the animate() method to animate and delay the scroll effect and make it attractive to look.
Syntax:
$("element_selector").animate({ scrollTop: $( 'element_selector').get(0).scrollHeight }, timer);
Example: The below code example uses the scrollTop method with the animate method.
<!DOCTYPE html> < html >
< head >
< title >Scroll Automatically</ title >
< script src =
</ script >
<!-- jQuery code to show the working of this method -->
< script >
$(document).ready(function () {
$("button").click(function () {
$("html, body").animate({
scrollTop: $(
'html, body').get(0).scrollHeight
}, 2000);
});
});
</ script >
< style >
h2 {
color: green;
}
</ style >
</ head >
< body >
< center >
< div >
< h1 >
Click the below button
to scroll the page.
</ h1 >
< button >Scroll Page</ button >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
< h2 >GeeksforGeeks</ h2 >
</ div >
</ center >
</ body >
</ html >
|
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.