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。

我使用了动画，并且也使用了缓慢的参数。那么，我的错误是什么？我如何才能在这里找到想要的平滑滚动。

网站：

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');
});

演示：小提琴