How to jump to top of browser page using jQuery?

When the website contains lots of data on a single page and while seeing down the website, if the user wants to see the main content i.e, top of the browser page without scrolling, this can be achieved by using jQuery.

Example: Jump to the top of the browser page

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
<script src=
</script>
     <script>
         $(function () 
         {
             $('#Top').click(function () 
             {
                 $('html, body').animate(
                     {
                     scrollTop: '0px'
                 },
                 1500);
                 return false;
             });
         });
    </script>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Welcome to GeeksforGeeks</h2>
        <h4>Glad to see you!!</h4>
        <h5>A Computer Science portal for the geeks.</h5>
        <p>It is the complete portal for learning in Computer Science field.</p>
        <p>GeeksforGeeks portal contain every basic to hard knowledge regarding
        Computer Science field.</p>
        <p>You can also share interview experience here to help other geeks.</p>
        <p>It also focuses on GATE, provides notes, previous year question papers,
        last minute notes, etc.</p>
        <p>GeeksforGeeks provides opportunity for the geeks to contribute
        and help other geeks.</p>
        <a id="scrlTop" href="#">Scroll to Top</a>
    </center>
</body>
</html>

chevron_right


Output :

Before clicking on “Scroll to Top”

After clicking on “Scroll to Top”


In the above example, when we click “Scroll to Top” link, it automatically jump to the top of the browser page.



My Personal Notes arrow_drop_up


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.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.