如何補償具有不同偏移量的動畫的速度？

Question

這是我的代碼：

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

我觸發不同的（垂直）的地方我的網頁上的驗證碼。 由於偏移改變，到目的地的速度不同（我點擊的越多，動畫越快）。

你會如何補償這部動畫？每個垂直/偏移值具有相同的速度？

這裏有一個例子：http://jsfiddle.net/o2oq4y38/1/

點擊1，並採取滾動速度的照顧。點擊8，看看它有多慢。

Answer 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/

這將滾動從頁面上的任何地方用相同的速度之上。