How to use the scrollTop with height() method In JQuery
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="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 () { $(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>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:
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