Pour une liste plus complète des méthodes pour un défilement fluide, consultez ma réponse ici.
Pour faire défiler jusqu'à une certaine position en un temps exact, window.requestAnimationFrame peut être utilisé, calculant la position actuelle appropriée à chaque fois. setTimeout peut être utilisé pour un effet similaire lorsque requestAnimationFrame n'est pas supporté. Pour faire défiler jusqu'en haut de la page, la fonction suivante peut être appelée avec la position comme 0.
/*
@param pos: la position y où faire défiler jusqu'à (en pixels)
@param time: la durée exacte du défilement (en millisecondes)
*/
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
scrollToSmoothly(0, 700);
});
Défilement fluide vers le haut
La bibliothèque SmoothScroll.js peut également être utilisée, qui gère des cas plus complexes tels que le défilement fluide à la fois verticalement et horizontalement, le défilement à l'intérieur d'autres éléments conteneurs, différents comportements de facilité, le défilement de manière relative à la position actuelle, et plus encore.
smoothScroll({yPos: 'start', duration: 700});
// ou
smoothScroll({yPos: 0, duration: 700});
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
smoothScroll({yPos: 'start', duration: 700});
});
Défilement fluide vers le haut
Alternativement, vous pouvez passer un objet d'options à window.scroll avec le comportement défini sur smooth, qui défile jusqu'à une position x et y spécifique, ou window.scrollBy qui fait défiler une certaine quantité depuis la position actuelle :
// Faire défiler jusqu'à des valeurs spécifiques
// scrollTo est similaire
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Faire défiler certaines quantités depuis la position actuelle
window.scrollBy({
top: 100, // pourrait être une valeur négative
left: 0,
behavior: 'smooth'
});
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
window.scroll({top: 0, left: 0, behavior: 'smooth'});
});
Défilement fluide vers le haut
Les navigateurs modernes prennent en charge la propriété CSS scroll-behavior, qui peut être utilisée pour rendre le défilement dans le document fluide (sans besoin de JavaScript).
window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
window.scrollTo(0, 0);
});
html, body {
scroll-behavior: smooth;
}
Défilement vers le haut (JavaScript)
Lien pour défiler en douceur vers le haut de la page (sans JavaScript)
