用 $.velocity 替换 jquery 的 $.animate 不起作用答案

【问题标题】：Replace jquery's $.animate with $.velocity doesn't work用 $.velocity 替换 jquery 的 $.animate 不起作用
【发布时间】：2016-01-21 21:18:17
【问题描述】：

我有这个动画在 jquery 中工作得很好，除了它很迟钝。 onclick，它会平滑地向下滚动到想要的元素。

$('#aboutMenu').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top -200
}, 900);
return false;

我应该能够简单地“下载 Velocity，将其包含在您的页面中，并将 jQuery 的 $.animate() 的所有实例替换为 $.velocity()。您将立即看到所有浏览器和设备的性能提升 -尤其是在移动设备上。”

好吧，我做到了，但是当我点击时，什么也没有发生。

我错过了什么？

【问题讨论】：

Velocity 仅适用于 CSS 动画属性，不适用于 scrollTop，它会更改非 CSS 样式元素的属性。
github.com/julianshapiro/velocity/issues/26
@A.Wolff：很好的链接，一直在寻找权威参考
@TrueBlueAussie 有滚动属性/参数，应该在链接中使用：julian.com/research/velocity/#scroll 并且非常完整，在现代浏览器中（目前只有 FF），scrollIntoVIew() 带有动画可以使用，但不确定它是否适合 OP 需求，而且目前还不是很有用
编辑：OP 想要一个 200px 的“间隙”（？！），所以不确定scrollIntoView() 是否可以在未来使用，甚至不确定如何使用$.fn.velocity('scroll',....) 设置它方法

【解决方案1】：

Velocity 仅适用于 CSS 动画属性，不适用于 scrollTop，它会更改非 CSS 样式元素的属性。

您只需要在 CSS 样式属性（边距、宽度等）上使用 velocity。为任何非 CSS 属性动画保留旧的 animate 代码。

更新（感谢 A.Wolff）：

Velocity 确实支持scrollTop，但他们添加了使用scroll 命令：

$element.velocity("scroll", { duration: 1500, easing: "spring" })

我们将从基础开始：Velocity 不支持动画像 $.animate() 这样的 scrollTop 属性。（这不是真正的财产—— jQuery 对其进行了填充。）

所以scrollTop 在animate 中工作的唯一原因是因为他们专门将它添加到jQuery 中。他们使用scroll 为velocity 做了同样的事情。

附：我们使用速度进行过渡，尤其是对于移动设备，它更加平滑。

【讨论】：

您好，谢谢您的回答。它与 $element.velocity("scroll", { duration: 1500, easing: "spring" }) 一起工作，但它仍然滞后。我意识到它来自 jquery-ui.min.js，我用它来让导航栏在 scrollDown 上找到 in。这就是造成滞后的原因。因此，我仍然使用 jquery 来制作 scrollDown 动画，因为它现在可以正常工作了。