Categories:> JavaScript, jQuery, jQuery Snippets

jQuery Snippet: Animated Scroll To The Top of The Page

On a lot of my projects that use jQuery, I like to put a “scroll to top” link in the footer, that once clicked automatically scrolls back to the top of the page. It’s a nice way for the user to get back to the top, and the animation provides a wee bit of subtle eye candy.

There are a lot of jQuery plugins out there that do this sort of thing, but you can achieve the same simple animated scrolling effect with just a few lines of code.

Here is the jQuery snippet that I tend to use:

<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery('#backToTop').click(function() {
        $('body,html').animate({
	   scrollTop: 0
        }, 1000);
        return false;
   });
});
</script>

 

<a id="<span class=" href="#">backToTop">Top ▲</a>

All you need is an anchor tag with the id “backToTop”, and include the above code in either the head tag, or before the closing body tag. And of course remember to make sure jQuery is included before the snippet 🙂

Share

About Ross Gledhill See all posts by author

I’m Ross, a freelance web developer based in Glasgow, Scotland. The large majority of my freelance work usually involves WordPress, but I also have experience in iPhone & iPad apps and bespoke solutions.