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

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:

mainScroll — 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 down to bottom of page in selenium using JavaScriptExecutor

hanishj

Improve

Article Tags :

How to Scroll to Bottom of Div in JavaScript ?

Using scrollTop Property

Syntax:

Using scrollIntoView Method

Syntax:

Similar Reads