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

Last Updated : 19 Sep, 2024

We are given an webpage and the task is to automatically scroll to the bottom of the page using jQuery.

Below are the approaches to achieve this:

Table of Content

Using the scrollTop with height() method
Using scrollTop with animate() method

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="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: $(document).height()
                }, 1000);
            });
        });
    </script>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 50px auto;
            text-align: center;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        h1 {
            color: #5a5a5a;
        }

        h2 {
            color: #4CAF50;
            margin: 10px 0;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 15px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 20px 0;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Click the button below 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 bottom</h2>
    </div>
</body>

</html>

Output:

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="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>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 50px auto;
            text-align: center;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        h1 {
            color: #333;
        }

        h2 {
            color: green;
            margin: 10px 0;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin: 20px 0;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Click the button below 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>
</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.