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

Posted 2023-05-07

【中文标题】通过jQuery动画减慢滚动到顶部事件

【英文标题】：Slow down scroll to top event by jQuery animate

【发布时间】：2011-01-08 14:00:27

【问题描述】：

我希望我的页面在单击某个锚点时转到顶部。

这是我尝试的方法，但它不起作用，它的滚动速度非常快。

 $('a[href=#top]').click(function () 
        $('body').animate(
                scrollTop: 0
        ,
        50);
);

我想放慢速度。

【问题讨论】：

可以用CSS解决，试试this solution

【参考方案1】：

$('a[href=#top]').click(function()
    $('html, body').animate(scrollTop:0, 'slow');
);

也许？

【讨论】：

知道为什么需要$('html, body') 吗？我用$(window) 尝试过，但它似乎没有任何效果，我有点期待它看到（如果我没记错的话）它是跟踪滚动位置的窗口对象？

window 是 veiwport 但您需要为文档 html 设置动画，也不需要 body $("html").animate(scrollTop: $("#whatever_id_you_want_to_go_to").offset() .top, 1200);

我认为您确实需要body，因为html 不适用于所有浏览器。

所以你需要body和html来支持所有浏览器？

webkit浏览器使用body，firefox使用html。

【参考方案2】：

当您将 50 作为第二个参数传递给动画时，即 50 毫秒。请参阅animate 文档。要么传递一个更大的数字，要么按照 c0mrade 的建议，简单地传递 'slow' 。

【参考方案3】：

您可以设置滚动顶部的时间

$('a[href=#top]').click(function()
 $('body').animate(
     scrollTop: 0,4000););

【参考方案4】：

$('a[href=\\#top]').click(function()
  $('body').animate(
    
      scrollTop: 0
    , 
    2000
  );
);

# 应该转义为 \\#。