如何在具有不同偏移的动画上补偿速度？

Question

这是我的代码：

-Z unstable-options

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

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

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

单击1，并处理滚动速度。然后点击8，看看它有多慢。

Answer 1

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

$('.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/

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