如何通過jQuery動畫減慢滾動到頂部事件

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
});

示例小提琴

如果在頁面中包含了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以獲得更好的兼容性。 查看文檔。