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 here.

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

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.