Here’s a little present for you all: an unobtrusive, easy-to-install, jQuery script that adds a fading scroll to top link with animated scrolling. It works like this:
If you’re already at the top of the page, the button is invisible and doesn’t fade in to view until the user starts scrolling. When they click on the link, it pulls them back to the top of the page and fades back out again – nice and easy.
Also, the script degrades gracefully, leaving nothing but a normal <a href> link.
Installation is very simple:
Include our jQuery script on your page:
<script src="js/jquery.scroll.pack.js" type="text/javascript"></script>
Add the scroll link to your page:
<a id="toTop" href="#">^ Scroll to Top</a>
Reference your scroll link in your jQuery script:
$("#toTop").scrollToTop();
That’s it! That’s all you really need to know, you might need to add an ie6 hack to get fixed positioning, but that comes down to how you’ve styled the scroll link yourself.
You can see the script in action on this blog, scroll away.
HTML/CSS files are included in the Zip file to give you an idea on styling.
Version 1.0: scroll-to-top.zip (23.68 kb)
Update: Version 2 now released!
Update: Version 3 now released!
