jQuery Animated Back To Top

jQuery Animated Back To Top

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.

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

6 comments
Josh Lake says

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.

Reply
Richard Carpenter says

Thank for your comment josh, much appreciated

Reply
Hirvesh says

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

Reply
Samiullah says

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

Reply
thuy ng says

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

Reply
Richard Carpenter says

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

Reply
Add Your Reply

Popular posts

css.php