jQuery Animated Back To Top

A useful button to have on any webpage is a back to top button. An easy solution for the web user to get back to the top without scrolling. Check out this code snippet which will show you how to do it.

In jQuery

Quick Demo

Check the bottom of this website for a quick demo.

jQuery Back To Top Button

The Code

The markup for the button is really simple and something even a beginner should be able to setup. At the bottom of your page simply add a normal anchor tag as you normally would with any link.

1
<a href="#" title="Back To The Top">Auto Scroll To The Top</a>

The jQuery

1
2
3
4
5
6
$(document).ready(function() {        
$('a[href=#top]').click(function(){  
$('html, body').animate({scrollTop:0}, 'slow');  
return false;  
});  
});

In a new “.js” file add the code above. It basically means. Lets look at the code in detail.

1
$(document).ready(function() {

jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event

1
$('a[href=#top]').click(function(){

When the document is ready apply the click handler to the anchor tag with a link of #top.

1
$('html, body').animate({scrollTop:0}, 'slow');

On a click event animate the HTML/BODY of the website, in this case the animation is “scrollTop” with a speed of slow.

Linking The Anchor Tag With The jQuery Script

If you click the link as it will do nothing. We first need to add a link to our anchor tag which was “#top”.

1
<a href="#top" title="Back To The Top">Auto Scroll To The Top</a>

We now need to set where top is in our HTML document. Just after the opening “<body>” tag add the following line of code.

1
<a name="top"></a>

Of course you don’t need to scroll to the top of your website you could even scroll to a certain point of your website, like a particular section for instance.

Conclusion

Thanks for taking part in this tutorial, hope you found it useful, I’d love to hear your comments. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

  1. May 29, 2012 at 7:57 AM

    Cheers for sharing this technique on how to get a back to top button on your website and also how you have made it scroll to the top because it is really effective. I use this on most of my websites that have a decent amount of content of the page because it makes it a lot easier for the user to navigate around your website. The way that do my back to top buttons is slightly different to yours and used a little bit more code but next time it comes to making one, I will try your code as it is a lot more simple meaning I could save myself a few bit of time. Once again, cheers for sharing, i’m sure it will be a great help to many people.

  2. May 29, 2012 at 5:20 PM

    Thank for your comment josh, much appreciated

  3. June 3, 2012 at 10:09 AM

    Nice work on the scroll-to-top implementation! Like it!

  4. June 5, 2012 at 9:37 AM

    That was as easy as you like, great tutorial website author,

  5. thuy ng
    September 28, 2012 at 9:19 PM

    what does it means when the error console says, $ is not a function… How can i fix that?

  6. September 29, 2012 at 8:46 AM

    try changing the dolla sign ($) to “jquery”

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 6 Comments On jQuery Animated Back To Top, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php