How to scroll automatically to the Bottom of the Page using jQuery?
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.
html
<!DOCTYPE html>
< html >
< head >
< title >Scroll Automatically</ title >
< script src =
</ script >
< 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:
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.
html
<!DOCTYPE html>
< html >
< head >
< title >Scroll Automatically</ title >
< script src =
</ script >
< 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.
Last Updated :
20 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...