Scrollen mit Animation
-
28-09-2019 - |
Frage
Ich brauche die JavaScript-Methode scrollTo (x, y) mit Animation auszuführen. Ich kann nicht‘Verwendung jQuery es tun.
Lösung
können Sie (fast) alles in Javascript animieren, indem die window.setTimeout mit () und window.clearTimeout () Anrufe. Siehe http://www.w3schools.com/js/js_timing.asp
Andere Tipps
[ Working Demo ]
function interpolate( source,target,pos ) {
return ( source + (target - source) * pos );
}
function easing( pos ) {
return ( -Math.cos( pos * Math.PI ) / 2 ) + 0.5;
}
function scrollTop( duration ) {
duration = duration || 1000;
var startY = window.pageYOffset,
start = Number(new Date()),
finish = start + duration;
var interval = setInterval(function() {
var now = Number(new Date()),
pos = (now > finish) ? 1 : (now - start) / duration;
scrollTo(0, interpolate( startY, 0, easing(pos) ));
if ( now > finish )
clearInterval( interval );
}, 15);
};
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow