JavaScript Scroll to Top of Div

JavaScript Scroll to Top of Div

  1. Use the scrollIntoView() Method to Scroll to Top of Div in JavaScript
  2. Use the scrollTo() Method to Scroll to Top of Div in JavaScript

In JavaScript, for internal linking and scrolling through the webpage, we can have multiple ways to follow. We can even set the href of the anchor tag direct to an id and scroll up to that section.

But for a dynamic drive, we will switch to the JavaScript way of performing the task.

In the following section, we will demonstrate the scrollIntoView() and scrollTo() methods. Both methods have similar functionality, but scrollIntoView() can work without any parameter, and scrollTo() might need some specified points.

Let’s check the example.

Use the scrollIntoView() Method to Scroll to Top of Div in JavaScript

Technically, the method requires nothing other than the declaration of the method. We will first initiate an instance for the top div element and then use the scrollIntoView() assisted.

Consequently, an event of linking will specifically take the view to that top portion. The following code lines explain in detail.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #top{
      height:200px;
      background:pink;
    }
    #buff{
      height:800px;
    }
  </style>
</head>
<body>
<div id="top"></div>
  <div id="buff"></div>
  <a href="javascript: scroll()">Jump to top of page</a>
  <script>
  function scroll(){
    var top = document.getElementById("top").scrollIntoView({behavior: 'smooth'}, true);
  }
  </script>
</body>
</html>

Output:

Use scrollIntoView Method to Scroll to Top

Use the scrollTo() Method to Scroll to Top of Div in JavaScript

The scrollTo() method takes parameters to reset the viewport measurements. Usually, the current state of the viewport will have its position on the x-axis and y-axis.

Later, to reach the top segment, we will reset the current positions, and thus we will be at the top of the div.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #top{
      height:200px;
      background:orange;
    }
    #buff{
      height:800px;
    }
  </style>
</head>
<body>
<div id="top"></div>
  <div id="buff"></div>
  <a href="javascript: scroll()">Jump to top of page</a>
  <script>
    function scroll(){
  var top = document.getElementById("top")
  window.scrollTo(0,0);
    }
  </script>
</body>
</html>

Output:

 Use scrollTo Method to Scroll to Top

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

Related Article - JavaScript Div

  • Show/Hide Div onClick in JavaScript
  • JavaScript Reload DIV
  • Scroll to Bottom of a Div in JavaScript
  • Add HTML to Div Using JavaScript
  • Related Article - JavaScript Scroll

  • Implement Auto Scroll in JavaScript
  • Scroll to the Top of a Page in JavaScript
  • JavaScript Scrollable Div
  • Smooth Scroll in JavaScript
  • Infinite Scroll in JavaScript