Log In | Register | March 26, 2019

Share
 

jQuery Programming - September 10, 2010

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: | FavoriteLoadingAdd to favorites

2 Comments

20100
Thursday, July 7, 2011

$(‘html, body’).animate(
{scrollTop: ’0px’},
500,
function() {
alert(‘toto’);
}
);

The callback function run two times…

Paphos Car Rental No excess
Thursday, June 6, 2013

The most recent assessment, published in September 2011, found paphos car hire” compliant” or” largely compliant” on 40
out of 49 recommendations relating to money-laundering and financing of terrorism.
So travellers can travel though deserving tourist
places of the state, as 6. The outgoing president, Demetris Christofias, says he still can’t believe the economy is turning around. As of October 2010, it’s
unlawful for drivers to have a go at either sport before.
These are all separate excursions on each day of the rental
deal before finalizing anything.

Leave a Comment



Need Help? Ask a Question

Ask anything you want from how to questions to debug. We're here to help.

You Must Be Logged In To Post A Question.

Log In or Register