如何使用 jquery animate 滚动到元素跨浏览器

Posted 2023-05-08

【中文标题】如何使用 jquery animate 滚动到元素跨浏览器

【英文标题】：How to scroll to element cross browser using jquery animate

【发布时间】：2013-03-17 21:14:43

【问题描述】：

这段代码：

jQuery('body').animate(scrollTop: target.offset().top, 300);

适用于 Firefox，但不适用于 chrome。

这段代码：

jQuery('html').animate(scrollTop: target.offset().top, 300);

适用于 chrome，但不适用于 firefox。

我还没有在 IE 中测试过。

跨浏览器的正确方法是什么？如果从上面的 sn-ps 中不清楚，我的目标是页面上的一个 div，我想慢慢向下滚动到它，所以他们完全按照我的意愿做......只是不是跨浏览器。

【问题讨论】：

我似乎记得必须修改选择器以同时包含html 和body，即："html,body"。

我的网站上的 jQuery 淡入淡出也有类似的问题。

【参考方案1】：

同时指定html 和body：

$("html,body").animate(scrollTop: target.offset().top, 300);

【讨论】：

对于 Internet Explorer？

我试的时候就这样了，就是想知道用的是哪个(html/body) ie，或者有没有什么其他功能更推荐用ie。

请注意，如果您为.animate() 提供回调，它可能会执行两次（每个元素一次，html 和body）。这可以通过将回调从 .animate() 移动到 .promise().done(myCallback) 来解决