How to make a fading in/out back to top button

How to make a fading in/out back to top button

As you have probably noticed, if you scroll down far enough on my blog a little button fades in & you can click it to go back to the top of the page. I accomplished this using jQuery & two plugins. The first one, that does most of what we want was made my David Walsh. The second one, that actually scrolls back up was, made by Ariel Flesler.

What are we doing?

Ok, we want to make a link that fades in as you scroll down & then brings you back to the top of the page right? It's just a little nicety that's not really appropriate on every site so I'll let you be the judge on whether or not it is for your site.

Down to business

Right, so the first thing you'll want to do is get both of the plugins I mentioned above installed along with the jQuery library. Next you'll need to make a anchor with a href to a blank div at the top of your page, or something at the very top of the page… Ex: #logo-div.

Style your link

Realistically, you'll have your own CSS but this just what I had.

a#top { 
  display: none; 
  position: fixed; 
  right: 10px; 
  bottom: 10px; 
  color: #fff; 
  font: normal bold 12px Helvetica;
  text-decoration: none; 
  background: #888; 
  padding: 5px 10px;  
}
a#top:hover { 
  background: #111; 
}

Now for the good part

This the real meat & bones of the effect here.

$(document).ready(function() {
 $('#top').topLink({
   min: 400,
   fadeSpeed: 500
 });
 $('#top').click(function(e) {
   e.preventDefault();
   $.scrollTo(0,300);
 });
});