Create an Animated Back To Top Link Using jQuery

In this tutorial, we are going to create a simple Back To Top link which when you click on it will scroll your user back to the top of the page with style.

First thing you want to do is create your link for the back to top. In this tutorial I used.

<a href=”#top” class=”backtotop”>Back To Top</a>

In the href I used the #top which I will later have available for users that disable JavaScript. I also added a class of backtotop, which will be used by our jQuery for animation to the top.

At the top of the document, we will add

<a name=”top”></a>

This piece will only be used by our link if the user has JavaScript disabled.

Now that we have these parts in place, it’s time for the good stuff. Remember that any jQuery you make should go in between the document ready function for it to work.  You will also need to make sure that you include the jQuery core file as well.

We are going to use 2 methods standard to jQuery, which are the click method and animate method to make this work.

$('.backtotop').click(function(e){
e.preventDefault();
});

First you see that I used a selector to reference anything with a class of .backtotop. After I selected the elements, I then appended the .click method which will handle our events to come when we click on the link with the .backtotop class. We pass the e through the function of the .click that way we can disable the link using the .preventDefault() method.

Now within the click event, we also want to animate the users browser window back to the top of the page. We do this by selecting the html and body of the page and then appending the .animate method to it.

$('html, body').animate({scrollTop: '0px'}, 500);

The .animate method allows me to pass through a variety of parameters, but for this tutorial we will use the scrollTop only. We are telling our browser to scroll to the top at the 0px mark. After we pass our parameter, we need to define the speed/duration at which you want the animation to occur. I chose, 500. This number is given in milliseconds.

That’s it. Applying this script and the class of .backtotop to your links, will allow you to have a fully animated back to top link. Your jQuery code should now look like the below:

$('.backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: '0px'}, 500);
});

Let me know if you have any questions or problems below in the comments.

I have provided a link also, for you to download the source file for this tutorial.

Animated Back To Top File Download

Post By: Frank Perez | Add to favorites