November 26, 2021

How to Scroll to the Top of the Page using Javascript

By Krishnaa JavaScript Questions 0 Comments

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

To scroll vertically from bottom to top, 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 bottom to top 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 bottom to top. 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 Top” and for the button element, it is “Go to Top”.

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>
        <h1>Scroll to Top</h1>        
        <button>Go to Top</button>        
    </div>
    
    <script src="script.js"></script>
</body>
</html>

div {
    text-align: center;
}

h1 {
    height: 200vh
}

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

Javascript

We have selected the button element using document.querySelector() method and stored it in the btnTop 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 0 and it specifies the number of pixels along the Y-axis to scroll the window or element. The left property is also 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 btnTop = document.querySelector("button");

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

You May Also Like: