What is animate scrollTop?

Animate scrollTop is a handy feature that can be implemented to give an added functionality to users.

Let’s assume that you are developing a website that hosts blogs, a Blogspot. Usually, article pages have details on the top about the article, and a lengthy article that flows to the very bottom of the webpage. Instead of having users scroll back to the top, wouldn’t it be nice to give them a feature that allows them to, with the press of a button, navigate back to the top of the webpage?

For this very reason, our friend JQuery provides us with a helpful feature called .scrollTop().


<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        How to animate scrollTop with jQuery? 
    </title> 
      
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
      
    
</head> 
  
<body> 
    <h1> 
        Does what a spider can
    </h1> 
      
    <br>
      
    <div class="article">
        <p> 
            Peter Parker’s gifts from the spider bite include enhanced strength, 
            stamina, and agility, as well as the ability to cling to nearly 
            any surface by his hands and feet, and an internal “alarm” 
            of sorts that warns him of impending danger. 
            When in costume he becomes a figure in motion, leaping and jumping 
            about with a steady stream of wisecracks.
        </p>

        <p>
            Peter Parker’s gifts from the spider bite include enhanced 
            strength, stamina, and agility, as well as the ability 
            to cling to nearly any surface by his 
            hands and feet, and an internal “alarm” of sorts that 
            warns him of impending danger. When in costume he becomes a 
            figure in motion, leaping and jumping about with a steady stream 
            of wisecracks.    
        </p> 
        
        <p class="scrollable"> 
            Recently, Parker acquires a specialized suit 
            of armor from Stark that features many qualities 
            of the inventor’s own Iron Man suits, including 
            enhanced protective layering, optics, internal 
            air supply, along with a set of four spider-like extra “arms” 
            that answer to the teenager’s mental commands.
        </p>
    </div> 
      
    <button onclick="scrollTop()"> 
        Get Position
    </button> 
      
    <script> 
        $(document).ready(function() { 
                $("button").click(function() { 
                    alert($("div").scrollTop() + " pixels"); 
                }); 
            }); 
    </script> 
    
</body> 
  
</html>

function scrollTop() { 
            $("html, body").animate({ scrollTop: "0" }, 5000); 
        }

We have a function called scrollTop(), which is the scrollTop feature’s backbone. First, we used the Jquery selector ("html, body") to ensure that our code is compatible with different browsers. Next, we used the .animate() method, which takes a dictionary of CSS properties and values as the first parameter. An integer represents the animation duration in milliseconds as the second parameter. We specified where .animate() should scroll to by giving a value of “0” to the scrollTop property as the first argument and, to indicate the duration of the scrolling animation, giving a value of 5000 as the second argument.

Note: The duration of animation (second argument) is given in milliseconds. Therefore, the value of 5000 means that the animation will last 5 seconds.

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

You TubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources