Skip to content
Related Articles

Related Articles

Scroll to the top of the page using JavaScript/jQuery
  • Last Updated : 18 May, 2019

A scrollable page can be scrolled to the top using 2 approaches:

Method 1: Using window.scrollTo()
The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.

Syntax:

window.scrollTo(x-coordinate, y-coordinate)

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
      Scroll to the top of the
      page using JavaScript/jQuery?
  </title>
    <style>
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>Scroll to the top of the page 
      using JavaScript/jQuery?</b>
    
    <p>Click on the button below to 
      scroll to the top of the page.</p>
    
    <p class="scroll">GeeksforGeeks is a
      computer science portal. This is a 
      large scrollable area.</p>
    
    <button onclick="scrollToTop()">
      Click to scroll to top
  </button>
    <script>
        function scrollToTop() {
            window.scrollTo(0, 0);
        }
    </script>
</body>
  
</html>

Output:



  • Before clicking the button:
    scroll-before-js
  • After clicking the button:
    scroll-after-js

Method 2: Using scrollTo() in jQuery

In jQuery, the scrollTo() method is used to set or return the vertical scrollbar position for a selected element. This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top.

Syntax:

$(window).scrollTop(position);

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
      Scroll to the top of the
      page using JavaScript/jQuery?
  </title>
    <style>
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    </style>
  
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      Scroll to the top of the page
      using JavaScript/jQuery?
  </b>
    <p>
      Click on the button below to 
      scroll to the top of the page.
  </p>
    <p class="scroll">
      GeeksforGeeks is a computer
      science portal. 
      This is a large scrollable area.
  </p>
    <button onclick="scrollToTop()">
      Click to scroll to top
  </button>
    <script src=
  </script>
    <script>
        function scrollToTop() {
            $(window).scrollTop(0);
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking the button:
    scroll-before-jq
  • After clicking the button:
    scroll-after-jq

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :