Smooth Anchors

Long web pages usually have an anchor that takes you back to the top of the page. In most cases, the browser will skip right to the top when a user clicks that link. But using jQuery, you can easily make your “Top of Page” anchors more pleasant.

First, you need your anchored link:

Going Up? <a href="#top" id="back-to-top">Top</a>

Now, add in a simple jQuery function to make the jump a bit smoother:

$(document).ready(function(){
    $('#back-to-top').click(function(e){
        e.preventDefault();
        $('html,body').animate({scrollTop:0},'slow');
    });
});

Note: Be sure to include a copy of jQuery before calling this function.

Breaking down this simple code, we assign a function to the click event for #back-to-top.

In that function we prevent the default action, and use jQuery’s animate to scroll to the top of html and body.