jQuery body scrollTop

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:
After clicking the button:

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=
"https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
    <script>
        function scrollToTop() {
            $(window).scrollTop(0);
        }
    </script>
</body>
</html>

Output:

Before clicking the button:
After clicking the button:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

The scrollTop property in JavaScript is used to set or return the vertical scrollbar position of any element. Setting the scrollTop to any value will make the page scroll to that location. The scroll by default takes place immediately and abruptly scrolls to the value. This scrolling can be animated using jQuery.

The animate() method is used to perform a custom animation on a set of CSS properties. It works by changing the value of the property in gradual steps to create an animated effect. Only the properties having numeric values can be animated. The animation can be modified with 2 additional parameters that can help to change the speed of the animation.

This method is used with the scrollTop property to animate the scrolling on the page. The jQuery selector is used to select both the “html” and “body” tags of the page. This is done to ensure compatibility with some browsers where selecting only the body element does not work.

The animate() method is used on this selected element with the scrollTop property in the styles argument. The speed and easing of the animation can be changes as required.

Syntax:

$("html, body").animate({ scrollTop: scrollPosition });

Example 1: This example animating the scroll with the default speed.

<!DOCTYPE html>
<html>
<head>
    <title>
        How to animate scrollTop with jQuery?
    </title>
    <script src=
        "https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
    <style>
        .scrollable {
            background-color: green;
            height: 1000px;
        }
    </style>
</head>
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
    <b>
        How to animate scrollTop with jQuery?
    </b>
    <p>
        Click on the button to scroll
        to the top of the page.
    </p>
    <p class="scrollable">
        This is a large div to
        help in scrolling.
    </p>
    <button onclick="scrollTopAnimated()">
        Scroll To Top
    </button>
    <script type="text/javascript">
        function scrollTopAnimated() {
            $("html, body").animate({ scrollTop: "0" });
        }
    </script>
</body>
</html>

Output:

Example 2: This example animating the scroll with a speed of 3000.

<!DOCTYPE html>
<html>
<head>
    <title>
        How to animate scrollTop with jQuery?
    </title>
    <script src=
        "https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
    <style>
        .scrollable {
            background-color: green;
            height: 1000px;
        }
    </style>
</head>
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
    <b>
        How to animate scrollTop with jQuery?
    </b>
    <p>
        Click on the button to scroll to the
        top of the page.
    </p>
    <p class="scrollable">
        This is a large div to help in scrolling.
    </p>
    <button onclick="scrollTopAnimated()">
        Scroll To Top
    </button>
    <script type="text/javascript">
        function scrollTopAnimated() {
            $("html, body").animate(
                { scrollTop: "0" }, 3000);
        }
    </script>
</body>
</html>