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.

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.

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

The jQuery

$(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.

$(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

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

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

$('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”.

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

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s