点击菜单时 jQuery 平滑滚动

Question

我的 jQuery 平滑滚动工作时

<a href="#services">Services</a>

但是我想要平滑滚动

<a href="http://website.com/#services">Services</a>

这个标记。这可能吗？

我正在使用的 jQuery

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

Answer 1

您可以使用substr()从 href 中提取目标字符串:

$('.nav a').click(function (e) {
    var linkHref = $(this).attr("href");
    var idElement = linkHref.substr(linkHref.indexOf("#"));
    $('html, body').animate({
        scrollTop: $(idElement).offset().top
    }, 1000);
    return false;
});

Live exemple