您将如何补偿具有不同偏移量的动画的速度？答案

【问题标题】：How would you compensate speed on an animation with different offset?您将如何补偿具有不同偏移量的动画的速度？
【发布时间】：2015-05-13 15:43:57
【问题描述】：

这是我的代码：

$('.element').click(function () {
    var offsetTop = $('.destination').offset().top;
    $('html,body').stop(true, false).animate({ scrollTop: offsetTop }, 800);
});

我在网页的不同（垂直）位置触发此代码。由于偏移量变化，到目的地的速度不同（我点击顶部的次数越多，动画越快）。

你会如何补偿这个动画？在每个垂直/偏移值上具有相同的速度？

这里有一个例子：http://jsfiddle.net/o2oq4y38/1/

点击 1，注意滚动速度。比点击 8，看看它有多慢。

【问题讨论】：

在点击时应用此动画并停止上一个动画
如果没有示例，很难准确理解您的意思。如果我明白你的意思，那么，因为速度是距离和时间的乘积，你需要减少距离或增加动画时间。
好的，例子来了....
添加了一个例子，检查问题的底部；）
我知道速度是距离和时间的乘积，但它们并没有以线性方式增长。所以如果时间为 800 且偏移量为 400 和 8000，则使用 400*800 和 8000*800 的速度不是线性的...

标签： jquery animation math

【解决方案1】：

你必须根据offset动态计算动画的speed。

$('.element').click(function () {
    var offsetTop = $(this).offset().top,
        destinationTop = $('.destination').offset().top,
        speed = ((destinationTop - offsetTop) / $(window).height()) * 800;
        // Speed calculation according to the distance to cover

    $('html,body').stop(true, false).animate({
        scrollTop: destinationTop
    }, speed);

});

演示：https://jsfiddle.net/tusharj/o2oq4y38/2/

这将从页面上的任何位置以相同的速度滚动到顶部。

【讨论】：

不确定你是否明白我的意思。检查我发布的示例。在您的情况下，速度始终是相同的值，我猜应该会改变......