Question

I am trying to learn jQuery and I’m having a mental blank at the moment. The following code scrolls my page to the top with a smooth transition, but I would like this smooth transition to work for all anchor/ID links on my site (it’s only a one pager).

$(document).ready(function() {

    $('a[href="#the-top"]').click(function (e) {
        $("html, body").animate({ scrollTop: $('#the-top').offset().top }, 1000);
        return false;
    });

});

How can I change my code to achieve this?

Answer 1

jQuery(function($) {

    $('a[href^=#]').bind('click', function (evt) {
        var $what = $('#' + $(this).attr('href').split('#')[1]);
        $('html, body').stop().animate({ scrollTop: $what.offset().top }, 1000);
        evt.preventDefault();
    });

});

Changes suggested in this code:

• Change global $ object to jQuery
• Just jQuery(fn) as document.ready(fn)
• Closure: use jQuery as $ inside that function
• Prevent default event from anchor instead of return false (source: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)
• Use of $what asking for the #something part of anchor href, in order to prevent misbehaviors in IE (because if you have href="#some" sometimes it become href="http://yoursite.com/yourcurrentpage/#some instead)

All of these are kind of optional. You get the idea. Feel free to change.

DEMO AT: http://jsfiddle.net/Nm3cT/