Open In App

How to scroll automatically to the Bottom of the Page using jQuery?

Improve
Improve
Like Article
Like
Save
Share
Report

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>
 
    <!-- 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:

scrollTopGIF

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.

html




<!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:

scrollTopGIF2

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
Previous
Next
Share your thoughts in the comments
Similar Reads