带有动画的jquery scrollTop答案

【问题标题】：jquery scrollTop with animation带有动画的jquery scrollTop
【发布时间】：2014-04-08 21:44:55
【问题描述】：

我试图在页面底部放置一个简单的“滚动到顶部”按钮，该按钮使用平滑滚动到顶部。我读过的所有内容都说这应该是使用“animate（{scrollTop}）”脚本的简单问题。但是，它总是直接跳到顶部，跳过滚动动画。

脚本：

$('#jump').click(function(){
    $('body, html').animate({
        scrollTop: 0px
    }, 600);
});

和html标签（包括样式标签以防万一）：

<a href="#" id="jump" style="position:absolute; bottom:10px; right:10px">scroll to top</a>

这里有一个 jsfiddle 演示了同一问题的精简版：http://jsfiddle.net/5V5Tf/

这似乎是一个简单的问题......我只是心不在焉并错过了一些明显的东西。

谢谢

【问题讨论】：

【解决方案1】：

问题是您的链接中仍然有一个href，因为它的行为就像一个正常的链接。删除标记中的href="#"，你应该是金色的。否则，您需要在单击锚点生成的事件上调用preventDefault()。

编辑：这是一个 modified version of your fiddle，它正在工作。

【讨论】：

【解决方案2】：

有效，当您在 onclick-event 中使用 body 时：http://jsfiddle.net/TPwpK/

$('#jump').click(function(){
    $('body').animate({'scrollTop': '0'}, 300);
});

【讨论】：

【解决方案3】：

我在 jsFiddle 找到了它。

将$('.iframe') 更改为$('body') 你需要preventDefault()这个事件

【讨论】：