Animated Top Link that works on every browser

Posted by Radu in Design,Tutorials,Web Development

Inspired by others ideas and code and also by the need to insert a Top Link like button on my own website I managed to write a script that not only works on all major browsers but it’s also neat and animated

The expected outcome

The general idea was to try and add a link on the right side of the page that will appear and stick there after a certain percentage of the page is scrolled down and when clicked will smoothly scroll the page back to the top. Also it’s mandatory that this should work on all major browsers (including IE).

Here is an example how this should look like (example working already on this page, just scroll down to see it)

The button and the placement problems

In order to add the button to the page we just need to add this code to our page just after the <body> tag:

<a href="#header-top">
<div id="back-top" style="display: block;"></div>
</a>

The DIV tag will be used to show our top link using a background-image (but you can use a text just as well) and the anchor will be used to link us to the top of the page (in this case by the most outer div tag with the #header-top id) .