你将如何与不同的偏移动画补偿的速度？ [英] How would you compensate speed on an animation with different offset?

问题描述

这是我的code：

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

和我触发不同的（垂直）的地方我的网页上的这个code。
由于偏移改变，速度目标是不同的（我越点击顶部，更快的动画）。

And I trigger this code on different (vertical) place of my webpage. Since the offset change, the speed to the destination is different (the more I click on top, the faster the animation is).

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

How would you compensate this animation? Having the same speed on every vertical/offset value?

下面有一个例子： http://jsfiddle.net/o2oq4y38/1/

点击月1日，并采取滚动速度的照顾。比点击8，看看它是多么慢。

Click on 1, and take care of the scrolling speed. Than click on 8, and see how slower it is.

推荐答案

您必须动态地根据偏移速度 code>。

You have to calculate speed of animation dynamically according to the 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/

这将滚动，从页面上的任何地方用相同的速度之上。

This will scroll to top with same speed from anywhere on the page.

这篇关于你将如何与不同的偏移动画补偿的速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！