jQuery cambia la velocità in base alla distanza

Question

Sto provando a mantenere una velocità relativamente costante quando si scorre indietro fino alla parte superiore della finestra del browser a seconda di quanto lontano dalla parte superiore della pagina si è.

Quindi, se si scorre la pagina 500px o 5000px, vorrei creare una funzione che calcoli il tempo necessario per animare di nuovo verso l'alto mantenendo una velocità costante.

var scrollTo = function() { 
    var top = $(window).scrollTop(); 
    var dist = $('.article').offset().top; 
    var speed = // not sure what goes here depending on distance 

    $('html, body').animate({scrollTop: dist}, speed, 'linear'); 
}; 

Answer 1

Si può usare qualcosa di simile distance * <millisecond per unit distance>,

Come se si vuole coprire la distanza di 500 e 1500 a 1000 ms e 3000 ms, rispettivamente, allora la formula sarà

var speed = distance * 2 

Es:

var scrollTo = function() { 
 

 
    var dist = jQuery(window).scrollTop(); 
 
    var speed = dist * 2; 
 

 
    $('html, body').animate({ 
 
    scrollTop: 0 
 
    }, speed); 
 
}

body { 
 
    height: 5000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a style="position:fixed; top: 10px" onclick="scrollTo()">top</a>