How to animate scrollTop using jQuery ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to animate scrollTop with jQuery?
    </title>
      
    <script src=
    </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>

chevron_right


Output:
scroll-default

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to animate scrollTop with jQuery?
    </title>
      
    <script src=
    </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>

chevron_right


Output:
scroll-slow



My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.