jQuery使用动画平滑滚动到div

Question

概述： 我正在使用锚标签滚动到它们各自在 href 中分配的 div。

HTML 标记：

<ul class="nav navbar-nav">
    <li><a href="#howToUse">How to use</a></li>
    <li><a href="#benefits">Benefits</a></li>
</ul>

<div id="howToUse">
     Some content
</div>

<div id="benefits">
     Some content
</div>

jQuery：

$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    $('body').animate({ scrollTop: $anchor.top },'slow');
    return false;
});

问题： 因此，现在当我单击锚标记时，窗口会滚动到特定的 div，但滚动并不顺畅或缓慢。我宁愿说它根本不滚动。它只是跳转到那个 div。

我使用了 animate 并且还使用了参数 slow 。那么，我的错误是什么？我怎样才能实现我在这里寻找的平滑滚动。

网站：

http://irankmedia.com/uskincare/

您好，请检查本网站的导航栏，它没有给我预期的平滑滚动效果。

希望它会带来一个清晰的想法。

Answer 1

问题是$('#'+ $href).offset();，因为href本身有#，所以会抛出类似Uncaught Error: Syntax error, unrecognized expression: ##howToUse的错误

$('ul.nav').find('a').click(function (e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var $anchor = $(target).offset();
    $('body').stop().animate({
        scrollTop: $anchor.top
    }, 'slow');
});

演示：Fiddle

Answer 2

试试这个：

$('ul.nav').find('a').click(function() {
    var $href = $(this).attr('href');
    //var $anchor = $('#'+$href).offset();
    $('html, body').animate({
        scrollTop: $($href).offset().top
    }, 2000);
    return false;
});

演示here

Answer 3

只需删除与 $href 一起使用的“#”，否则你的代码运行良好，伙计

$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $($href).offset();
    $('body').animate({ 
          scrollTop: $anchor.top 
    },'slow');
    return false;
});

它抛出语法错误，无法识别的表达式：##howToUse