Comment créer un défilement animé fluide vers le haut sans jQuery ?

Défilement animé vers le haut dans de nombreux navigateurs (à l'exclusion de jQuery)

Implémentation d'un effet animé fluide de « défilement vers le haut » sur un la page Web est une exigence courante. Cependant, s'appuyer sur des bibliothèques JavaScript externes comme jQuery peut s'avérer indésirable. Cet article présente une solution multi-navigateurs pour créer une telle animation sans avoir besoin de frameworks supplémentaires.

Comprendre le script

Le code fourni implique une fonction récursive appelé scrollTo, qui prend trois paramètres :

1. element : L'élément cible pour le défilement (par exemple, document.body)
2. to : La position de défilement souhaitée (par exemple, 0 pour défiler vers le haut)
3. durée : La durée de l'animation en millisecondes

La fonction calcule la différence entre la la position de défilement actuelle de l'élément et celle souhaitée et applique un petit incrément pour combler l'écart toutes les 10 millisecondes. Cela crée un effet de défilement progressif et fluide.

Exemple d'utilisation

Pour utiliser cette solution, incluez simplement l'extrait JavaScript fourni dans la réponse et créez un écouteur pour l'événement click sur l'élément que vous souhaitez utiliser pour lancer le défilement. Voici un exemple :

<code class="html"><button id="scrollme" type="button">To the top</button></code>

<code class="javascript">var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!