Scroll to Top of the Page Using jQuery

Rumman Ansari   2021-01-14   Student   Web Development > jQuery   554 Share

HTML code

Here is the simple example to scroll to top of the page with jQuery. 


<!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <meta charset="utf-8">
  <title>Scroll to the top of the page jQuery</title>
</head>
  <body>
    <h1>Latest Apps</h1>
    <p>Facebook</p>
    <p>Insatgram</p>
    <p>Snapchat</p>
    <p>Hike</p>
    <p>Messenger</p>
    <p>Tinder</p>
    <p>TIK TOK</p>
    <p>LIKE</p>
    <p>Candy Crush</p>
    <p>Temple Run</p>
    <p>Vigo</p>
    <p>Youtube</p>
    <p>Gmail</p>
    <p>Crome</p>
    <p>Play Store</p>
    <p>LinkedIn</p>
    <p>PUBG</p>
    <p>FreeFire</p>
    <p>Counter Strike</p>
    <p>GTA Vice City</p>
    <p>Gaana</p>
    <p>Spotify</p>
    <p>Zomato</p>
    <p>Uber</p>
    <p>Mini Militia</p>
    <p>Telegram</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <p>etc...</p>
    <button id="top">Go Top</button>  
    <script>
      // Add jQuery Code here
    </script>
  </body>
</html>

jQuery Code


$("#top").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
Share this Post: