How to Scroll to the Bottom of the Page using Javascript

In this tutorial, you will learn how to scroll to the bottom of the page using javascript. The scrollbar generally appears when the size of the content exceeds the size of the browser window. There are mainly 2 types of scrollbars, horizontal and vertical.

To scroll vertically from top to bottom, we can make use of the scroll wheel which is present in the center of the mouse, or we can make use of the up arrow key. It can be annoying for users to scroll manually every time from top to bottom using these options.  Instead, we should provide them with a one-click solution.

Certain third-party libraries are specifically created to solve scrolling-related issues. These libraries also contain some advanced features to enhance user experience. But for the sake of simplicity, we will go with plain vanilla javascript.

To accomplish our goal, we can make use of the scrollTo() method of the window object which helps in scrolling to a particular set of coordinates inside a given element. We just need to pass X and Y coordinates of the element or an options object as a parameter.

The X coordinate represents the pixel along the horizontal axis and the Y coordinate represents the pixel along the vertical axis of the element that we want to be displayed in the upper left.

In the following example, we have a button element and upon click of that button, we will scroll from top to bottom. Please have a look over the code example and the steps given below.

HTML & CSS

  • We have 3 elements in the HTML file (div, h1, and button). The div element is just a wrapper for the rest of the elements.
  • The innerText for the h1 element is “Scroll to Bottom” and for the button element, it is “Go to Bottom”.
  • We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
  • We have also included our javascript file script.js with a script tag at the bottom.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div>
        <button>Go to Bottom</button>
        <h1>Scroll to Bottom</h1>
    </div>

    <script src="script.js"></script>
</body>

</html>
div {
    text-align: center;
}

h1 {
    margin-top: 200vh;
}

button {
    padding: 10px 20px;
    margin-bottom: 50px;
}

Javascript

  • We have selected the button element using document.querySelector() method and stored it in the btnBottom variable.
  • We have attached a click event listener to the button element.
  • In the event handler function, we are calling the scrollTo() method and passing an options object as a parameter. The top property is set to the height of the body element returned by document.body.scrollHeight and it specifies the number of pixels along the Y-axis to scroll the window or element. The left property is set to 0 and it specifies the number of pixels along the X-axis to scroll the window or element. The behavior property is set to smooth and it specifies whether the scrolling should be smooth or happen instantly in a single jump.
let btnBottom = document.querySelector("button");

btnBottom.addEventListener("click", (e) => {
  window.scrollTo({
    top: document.body.scrollHeight,    
    left: 0,
    behavior: "smooth",
  });
});