javascript - 如何通过jQuery动画减慢滚动到顶部事件

Question

jQuery animate 如何减慢滚动到顶部事件？

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

Answer 1

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

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

示例小提琴

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

Answer 2

这是animate方法的文档。

您可以使用“持续时间”参数来更改动画速度，并且可以使用“缓动”参数提供一些自定义缓动函数来更改动画行为。

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

$('#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)
});

我还建议用 jQuery 的 $.browser.webkit 替换 window.opera 以获得更好的兼容性。请参阅文档。

Answer 3

试试看，

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