How to Create a Scroll To Top Button

On long pages it is often quite nice to provide the user with a button or link to scroll back to the top of the page with a single click.

Scroll To Top example

It is possible to use simple javascript to accomplish this. 

However, in this example I would like to animate the scroll so we will be using jQuery.

STEP 1

We first create a simple HTML template and include the link to jQuery:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Scroll To Top Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   </head>
   <body>
      
   </body>
</html>

STEP 2

We can now add some content to the body section. 

I have just used some Lorem Ipsum text but, obviously, you can use anything you wish.

For simplicity, I have edited out many of the lorem text lines and only left a few.

Depending on your code editor you may be able to add lorem text with a simple command like: lorem*20

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Scroll To Top Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   </head>
   <body>
      <div>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi similique natus vero aut voluptatem, vitae quas assumenda enim eveniet cumque quaerat perferendis, harum laborum. Iste non illo repudiandae reprehenderit earum.</p>
         <p>Harum ipsa excepturi repellat sunt a similique deserunt quaerat minima doloremque pariatur, consequatur molestiae, veritatis sapiente. Odit omnis, excepturi officia ipsum magnam, explicabo sint illum a assumenda nesciunt tempore quia!</p>
         <p>Id labore magni ullam, corrupti soluta, facilis reprehenderit deserunt aperiam doloribus, debitis quasi hic non eaque quam amet eligendi expedita. Itaque temporibus autem pariatur enim, veniam mollitia illo amet delectus.</p>
         <p>Ea optio quis maxime, illum similique. Est facere illo incidunt laborum deserunt neque, fuga similique in, repudiandae, ullam exercitationem optio enim accusantium ab provident ut dolores autem? Culpa odit, praesentium!</p>
         <p>Ratione eligendi sapiente earum eos atque quasi sequi nulla. Omnis dicta assumenda perspiciatis vel, enim, facere, temporibus debitis quos quisquam eius distinctio cum. Temporibus, iusto similique quo aut repellat nemo.</p>
      </div>
   </body>
</html>

STEP 3

We can now add a button to take us to the top of the page.

My button has an id of 'toTop'. We will use this id in the jQuery.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Scroll To Top Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   </head>
   <body>
      <div>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi similique natus vero aut voluptatem, vitae quas assumenda enim eveniet cumque quaerat perferendis, harum laborum. Iste non illo repudiandae reprehenderit earum.</p>
         <p>Harum ipsa excepturi repellat sunt a similique deserunt quaerat minima doloremque pariatur, consequatur molestiae, veritatis sapiente. Odit omnis, excepturi officia ipsum magnam, explicabo sint illum a assumenda nesciunt tempore quia!</p>
         <p>Id labore magni ullam, corrupti soluta, facilis reprehenderit deserunt aperiam doloribus, debitis quasi hic non eaque quam amet eligendi expedita. Itaque temporibus autem pariatur enim, veniam mollitia illo amet delectus.</p>
         <p>Ea optio quis maxime, illum similique. Est facere illo incidunt laborum deserunt neque, fuga similique in, repudiandae, ullam exercitationem optio enim accusantium ab provident ut dolores autem? Culpa odit, praesentium!</p>
         <p>Ratione eligendi sapiente earum eos atque quasi sequi nulla. Omnis dicta assumenda perspiciatis vel, enim, facere, temporibus debitis quos quisquam eius distinctio cum. Temporibus, iusto similique quo aut repellat nemo.</p>
      </div>
      <button id="toTop">TOP</button>
   </body>
</html>

Step 4

We can now add the jQuery code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Scroll To Top Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>
      $(function(){
         $('#toTop').click(function(){
            $('html, body').animate({scrollTop: 0}, 'slow');
         });
      });     
      </script>
   </head>
   <body>
      <div>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi similique natus vero aut voluptatem, vitae quas assumenda enim eveniet cumque quaerat perferendis, harum laborum. Iste non illo repudiandae reprehenderit earum.</p>
         <p>Harum ipsa excepturi repellat sunt a similique deserunt quaerat minima doloremque pariatur, consequatur molestiae, veritatis sapiente. Odit omnis, excepturi officia ipsum magnam, explicabo sint illum a assumenda nesciunt tempore quia!</p>
         <p>Id labore magni ullam, corrupti soluta, facilis reprehenderit deserunt aperiam doloribus, debitis quasi hic non eaque quam amet eligendi expedita. Itaque temporibus autem pariatur enim, veniam mollitia illo amet delectus.</p>
         <p>Ea optio quis maxime, illum similique. Est facere illo incidunt laborum deserunt neque, fuga similique in, repudiandae, ullam exercitationem optio enim accusantium ab provident ut dolores autem? Culpa odit, praesentium!</p>
         <p>Ratione eligendi sapiente earum eos atque quasi sequi nulla. Omnis dicta assumenda perspiciatis vel, enim, facere, temporibus debitis quos quisquam eius distinctio cum. Temporibus, iusto similique quo aut repellat nemo.</p>
      </div>
      <button id="toTop">TOP</button>
   </body>
</html>

Line 8: this will ensure the page has loaded and is ready before executing any code.

Line 9: if the #toTop id element has been clicked then we perform a function (line 10 in this case).

Line 10: we target the html and body elements and animate to the top using a slow scroll. The reason we need to use html AND body is that different browsers require different rules. 

Want to Learn More?

Become a member and get access to the member only area of this site.

LEARN MORE

Comments

Your email address will not be published.

User Avatar

Thank you! No-one has ever explained why to use html and body in the jQuery function to animate! Really appreciate your work.

by Keith, 07-Jan-2016

User Avatar

Glad you found it useful, Keith.

by Patrick Morrow, 07-Jan-2016

PHP for Beginners

Would you like lifetime access to the hugely successful PHP for Beginners course? Click here to find out how.

FREE Code Snippets

FREE hints and tips delivered direct to you once per month.