jQuery使用animate平滑滚动到div

概述：
我正在使用锚标签滚动到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,并且还使用了慢速参数.那么,我的错误是什么？我怎样才能实现我在这里寻找的平滑滚动.

网站：

http://irankmedia.com/uskincare/

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

希望它能带来一个清晰的想法.

问题是$(‘#’$href).offset();,因为href本身有#,它会抛出一个错误,如Uncaught Error：语法错误,无法识别的表达式：## 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