How to scroll automatically to the Bottom of the Page using jQuery?
To auto scroll a page from top to bottom we can use scrollTop() and height() method in jquery.
In this method pass the document’s height in scrollTop method to scroll.
Example-1: Scroll without animation.
<!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 > h1 { color: green; } </ style > </ head > < body > < center > < div > <!-- click on this button and see the change --> < button >Click Here!</ button > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > </ div > </ center > </ body > </ html > |
Output:
- Before:
- After:
Example-2: Scroll with animation.
<!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 > h1 { color: green; } </ style > </ head > < body > < center > < div > <!-- click on this button and see the change --> < button >Click Here!</ button > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > < h1 >GeeksforGeeks</ h1 > </ div > </ center > </ body > </ html > |
Output:
- Before:
- After:
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.