如何通过jQuery动画减慢滚动到顶部事件答案

【问题标题】：How can Slow down scroll to top event by jQuery animate如何通过jQuery动画减慢滚动到顶部事件
【发布时间】：2013-10-01 11:53:42
【问题描述】：

如何通过 jQuery animate 减慢滚动到顶部事件的速度？

$('#go-to-top').click(function() {
   $(window.opera ? 'html' : 'html, body').animate({
      scrollTop: 0
    }, 80);
});

【问题讨论】：

@FritsvanCampen 确实，scrollTop 不是 CSS 属性，但 jQuery 可以很好地为您解决这个问题，因此 OP 代码确实有效。
stackoverflow.com/questions/5417080/… 和 stackoverflow.com/questions/2123690/… 的可能重复

标签： javascript jquery

【解决方案1】：

要减慢滚动速度，您可以增加完成动画所需的时间。目前，它需要 80 毫秒。如果您将该数字更改为 1 秒，您可以看到差异：

$('#go-to-top').click(function () {
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
    }, 1000); // scroll takes 1 second
});

Example fiddle

如果您在页面中包含了 jQueryUI 缓动库，您还可以添加缓动效果。

【讨论】：

【解决方案2】：

这是animate 方法的文档。

你可以使用“duration”参数来改变动画速度，你可以提供一些带有“easing”参数的自定义缓动函数来改变动画行为。

在您的情况下，您可以执行以下操作来指定动画“速度”。

$('#go-to-top').click(function() {
   $(window.opera ? 'html' : 'html, body').animate({
      scrollTop: 0,
   }, 1500); // 1500 here is the duration of animation in the milliseconds (seconds * 1000)
});

我还建议将 window.opera 替换为 jQuery 的 $.browser.webkit 以获得更好的兼容性。 See the docs.

【讨论】：

【解决方案3】：

试试看，

$('#go-to-top').click(function() {
    $(window.opera ? 'html' : 'html, body').animate({
      scrollTop: 0
    },2000);// for 2 seconds
});

【讨论】：

仅供参考，持续时间在设置对象之后。