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




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


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.



Contact Us