使用 jQuery 缓动动画滚动答案

【问题标题】：Easing on Animate Scroll with jQuery使用 jQuery 缓动动画滚动
【发布时间】：2014-08-07 16:35:11
【问题描述】：

我正在尝试在 jQuery 中对我的动画函数创建一个缓动效果，但我遇到了一些麻烦。到目前为止，这是我所拥有的：

function myCustomFunction(id){
    var divTag = $("div[name='"+ id +"']");
    $('html,body').animate({scrollTop: divTag.offset().top}, 800);
}

我想使用的轻松称为“easeOutQuint”。我尝试按照此处的示例 (http://easings.net/#easeOutQuint) 进行操作，但无法将示例应用到我的函数中。

【问题讨论】：

你说你不能应用这个例子是什么意思？你遇到了什么错误？
我尝试按照下面提到的@user2039846 的方式添加它，但由于某种原因它完全删除了滚动功能。

标签： jquery scroll jquery-animate effect easing

【解决方案1】：

首先，在此页面上包含下载部分的第一个脚本：(http://gsgd.co.uk/sandbox/jquery/easing/)。

然后像下面这样输入jQuery animate line：

function myCustomFunction(id){
var divTag = $("div[name='"+ id +"']");
$('html,body').animate({scrollTop: divTag.offset().top}, 800, 'easeOutQuint');
}

这里你可以看到例子... http://jsfiddle.net/Gq367/

如您所见，您错过了 jquery animate 函数中的 easing 参数。快速提醒：.animate( properties [, duration ] [, easing ] [, complete ] )

我很感兴趣你为什么按名称属性选择 div？

【讨论】：

谢谢！太棒了。我认为缓动是直接内置到 jQuery 中的。一旦我下载了缓动文件，一切都开始工作了。另外，我使用 "div[name='"+ id +"']" 的原因是因为我在完成 vimeo 视频后运行脚本。所以整个代码看起来像这样： function scrollToAnchor(id){ var divTag = $("div[name='"+ id +"']"); $('html,body').animate({scrollTop: divTag.offset().top}, 2000, 'easeOutQuint'); } 函数 onFinish(id) { scrollToAnchor('story'); }
如果我将 4000 设置为相对较小的高度，它看起来非常好，但由于它的持续时间很长才能产生这种好的效果，因此表单冻结滚动，因为缓动尚未结束，但已达到控制。我想知道是否有解决方案。根据许多测试，在 2000 年以下几乎感觉不到宽松。
如果有人开始滚动，您可以随时监听滚动事件并停止动画