WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Scroll to the Top of the Page Using jQuery/JavaScript

Topic: JavaScript / jQueryPrev|Next

Answer: Use the scrollTop Property

You can use the jQuery animate() method in combination with the scrollTop property to scroll to the top of the page smoothly with an animation, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>jQuery scrollTop Animation</title>
  • <style>
  •     .scroll-top{
  •         position: fixed;
  •         bottom: 10px;
  •         right: 10px;
  •         z-index: 99;
  •     }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script>
  • $(document).ready(function(){
  •     $(".scroll-top").click(function() {
  •         $("html, body").animate({ 
  •             scrollTop: 0 
  •         }, "slow");
  •         return false;
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <button type="button" class="scroll-top">Go to Top</button>
  •     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  • </body>
  • </html>

However, if you simply want to scroll to the top of the page without any animation or jQuery you can use the native JavaScript window.scrollTo(x-coord, y-coord) method, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>JavaScript Scroll to Top</title>
  • <style>
  •     .scroll-top{
  •         position: fixed;
  •         bottom: 10px;
  •         right: 10px;
  •         z-index: 99;
  •     }
  • </style>
  • <script>
  •     function goToTop(){
  •         window.scrollTo(0, 0);
  •     }
  • </script>
  • </head>
  • <body>
  •     <button type="button" class="scroll-top" onclick="goToTop();">Go to Top</button>
  •     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  • </body>
  • </html>

You can also do the same thing using the bookmark anchor, like <a href="#top">Go to Top</a>. However, it will add the string #top in the URL of the page.


Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.