Question

如何通过jQuery动画来减慢滚动到顶部事件？

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

Example fiddle

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

Answer 2

试试吧，

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

Answer 3

以下是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)
});

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

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

3 个答案: