How to Scroll to Bottom of Div in JavaScript ?

Last Updated : 04 Mar, 2024

Scrolling to the bottom of a div is a common task in web development, especially when dealing with chat applications, message boards, or any content where new information is frequently added at the bottom.

There are several approaches to scrolling to the bottom of the div in Javascript which are as follows:

Table of Content

Using scrollTop Property
Using scrollIntoView Method

Using scrollTop Property

The scrollTop property of a div element represents the number of pixels the content of the div is scrolled from its top. By setting this property to the div’s scrollHeight, we can scroll to the bottom.

Syntax:

// Get the div element
let divElement = document.getElementById('divId');
// Scroll to the bottom of the div
divElement.scrollTop = divElement.scrollHeight;

Example: To demonstrate the use of the scrollTop Property to scroll to the bottom of the div.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>Scroll to Bottom of Div</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
 
        #scrollableDiv {
            width: 100%;
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #dee2e6;
            background-color: #fff;
            padding: 10px;
            border-radius: 0.25rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
 
        p {
            margin: 0 0 10px 0;
        }
 
        .scrollBtn {
            border-radius: 0.25rem;
        }
 
        h2 {
            text-align: center;
            color: #2e8c46;
        }
    </style>
</head>
 
<body>
 
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div id="scrollableDiv">
                    <h2>Geeks for Geeks</h2>
                    <p>
                          GeeksforGeeks is a computer science
                        portal for geeks. It contains well-written, 
                          well-thought, and well-explained computer 
                          science and programming articles,
                        quizzes, and practice/competitive
                        programming/company interview Questions.
                      </p>
                    <p>
                          GeeksforGeeks has grown tremendously since its
                        inception in 2009 and now has over 2 million
                        registered users and over 10 million
                        page views per month.
                      </p>
                    <p>
                          The website covers topics ranging from algorithms,
                        data structures, programming languages,
                        software development, to interview preparation
                        for various tech companies.
                      </p>
                    <p>
                          GeeksforGeeks also provides a platform for users
                        to practice coding through its coding practice
                        section and participate in coding contests.
                      </p>
                    <p>
                          Overall, GeeksforGeeks is a valuable
                        resource for computer science enthusiasts,
                        students, and professionals seeking to
                        enhance their knowledge and skills in the
                        field of computer science and
                        programming.
                      </p>
                </div>
                <button class="btn btn-primary btn-block mt-3 
                               scrollBtn" 
                        onclick="scrollToBottom()">
                      Scroll to Bottom
                  </button>
            </div>
        </div>
    </div>
 
    <script>
       
        // Get the scrollable div element
        let scrollableDiv = 
            document.getElementById('scrollableDiv');
 
        // Function to scroll to the bottom of the div
        function scrollToBottom() {
            scrollableDiv.scrollTop = scrollableDiv
                .scrollHeight;
        }
    </script>
 
</body>
 
</html>

Output:

Scroll to the bottom of the div.

Using scrollIntoView Method

The scrollIntoView method is available on DOM elements. By default, this method scrolls the element into view, but we can specify options to control the scrolling behavior. In our case, we want to scroll to the bottom, so we pass block: ‘end’.

Syntax:

let divElement = document.getElementById('divId');
divElement.scrollIntoView({ behavior: 'smooth', block: 'end' });

Example: To demonstrate the use of the scrollIntoView Property to scroll to the bottom of the div.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll to Bottom of Div</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
 
        #scrollableDiv {
            width: 100%;
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #dee2e6;
            background-color: #fff;
            padding: 10px;
            border-radius: 0.25rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
 
        p {
            margin: 0 0 10px 0;
        }
 
        .scrollBtn {
            border-radius: 0.25rem;
        }
 
        h2 {
            text-align: center;
            color: #2e8c46;
        }
    </style>
</head>
 
<body>
 
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div id="scrollableDiv">
                    <h2>Geeks for Geeks</h2>
                    <p>
                          GeeksforGeeks is a computer science 
                          portal for geeks.It contains 
                          well-written, well-thought,and 
                          well-explainedcomputer science and 
                          programming articles, quizzes, and
                        practice/competitive programming/company
                        interview Questions.
                      </p>
                    <p>
                          GeeksforGeeks has grown tremendously
                        since its inception in 2009
                        and now has over 2 million registered users and
                        over 10 million page views per month.
                      </p>
                    <p>
                          The website covers topics ranging from algorithms,
                        data structures, programming languages,
                        software development, to interview preparation
                        for various tech companies.
                      </p>
                    <p>
                          GeeksforGeeks also provides a platform for
                        users to practice coding through its coding
                        practice section and participate in coding
                        contests.
                      </p>
                    <p>Overall, GeeksforGeeks is a valuable resource for
                        computer science enthusiasts, students, and
                        professionals seeking to enhance their knowledge
                        and skills in the field of computer science
                        and programming.
                      </p>
                </div>
                <button class="btn btn-primary btn-block mt-3 scrollBtn"
                onclick="scrollToBottom()">Scroll to
                    Bottom</button>
            </div>
        </div>
    </div>
 
    <script>
        // Get the scrollable div element
        var scrollableDiv = document.
            getElementById('scrollableDiv');
 
        // Function to scroll to the bottom 
        //of the div using scrollIntoView method
        function scrollToBottom() {
            var bottomElement = scrollableDiv.
                lastElementChild;
            bottomElement
                .scrollIntoView({ behavior: 'smooth', block: 'end' });
        }
    </script>
 
</body>
 
</html>

Output:

How to Scroll to Bottom of Div in JavaScript ?

Using scrollTop Property

Syntax:

HTML

Using scrollIntoView Method

Syntax:

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?