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，并且还使用了慢速参数。那么，我的错误是什么？如何实现我在这里寻找的平滑滚动。

网站：

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

只需删除＆＃39;＃＆＃39;与$ 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

Answer 3

试试这个：

$('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

jQuery使用animate平滑滚动到div

3 个答案: