How to use scrollTop with animate() method In JQuery
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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</h2> <h2>w3wiki</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.
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:
Table of Content
- Using the scrollTop with height() method
- Using scrollTop with animate() method