Scroll Page to Anchor

Question

I have some anchors on a site I'm playing with and I'd like them to scroll to anchors instead of doing a sudden jump to the anchor. I've tried several posted solutions here on stack overflow but haven't been able to get them to work. Am I doing something wrong?

I've tried this code and several like it but they don't seam to work:

$('a').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});

The site can be found here and currently only the 'about us' item is anchored: http://jsfiddle.net/pnKu2/

Answer 1

First instead of selecting all anchors, you should select just your navigation IE:

$('.menu-hover-underline').click(function(){
    return false;
});

Next extend this functionality to include the scroll

$('.menu-hover-underline').click(function(){
    var divId = $(this).text().toLowerCase();
    $('html, body').animate({
        scrollTop: $("#"+divId).offset().top
    }, 500);
    return false;
});

See jsfiddle http://jsfiddle.net/pnKu2/2/

Please note I updated your div Ids since all but the about div were id="title".

Answer 2

Try this

$(function() {
    $('a').click(function(e){
        var top = $( $(this).attr('href') ).offset().top;
        $('html, body').animate({
            scrollTop: top
        }, 500);
        return false;
    });
});

Answer 3

you could try like this:

$('a').click(function(e){
     var href = $(this).attr("href");
     var offsetTop = href === "#" ? 0 : $(href).offset().top;

     $('html, body').stop().animate(
     { 
       scrollTop: offsetTop
     }, 1000);

     e.preventDefault();
});

DEMO