jQuery scrollTop - 动画不起作用答案

【问题标题】：jQuery scrollTop - animation not workingjQuery scrollTop - 动画不起作用
【发布时间】：2012-11-07 12:47:02
【问题描述】：

使用找到的示例here，我正在尝试同样的实现。当我点击导航链接时，它会跳转到选定的 div 而不是滑动/滚动。

HTML：

导航

<div class="span3">
        <a href="#about-me"><img class="img-circle" src="http://placehold.it/200x200/e36b23/fff/&text=About+Me+"></a>
</div>

DIV

<div class="row-fluid" id="about-me"> ... </div>

JS：

<script>
$(document).ready(function(){

    $('nav ul li a').click(function(){
        var el = $(this).attr('href');
        var elWrapped = $(el);

        scrollToDiv(elWrapped,40);

        return false;
    });

    function scrollToDiv(element, navheight){
        var offset = element.offset();
        var offsetTop = offset.top;
        var totalScroll = offsetTop - navheight;

        $('body,html').animate({
            scrollTop: totalScroll
        }, 1000);
    }
});
</script>

所以它到达了“点击”的 div，但不是幻灯片动画——这正是我想要的。有人有什么想法吗？

【问题讨论】：

由于你的链接是一个有效的锚点，我想说你很可能会看到默认行为，因为 jQuery 没有被执行。

标签： javascript jquery html jquery-animate

【解决方案1】：

您需要调整 jQuery 选择器以匹配您的 html 类 - 您使用的 ul / li 与您引用的示例不同，例如

$('.span3 a').click(function(){

请参阅here 以获得小提琴：

【讨论】：

【解决方案2】：

您不会阻止默认行为，即直接导航（“跳转”）到锚点。就这样吧：

$('nav ul li a').click(function(evt){
  evt.preventDefault();
  ...
});

【讨论】：