Comment créer une animation de défilement vers le haut indépendante du navigateur avec du JavaScript pur ?

Animation de défilement vers le haut indépendante du navigateur

Lorsque nous sommes confrontés à la tâche de créer une simple animation de « défilement vers le haut » pour un lien, il est tentant d'opter pour une bibliothèque JavaScript comme jQuery ou MooTools. Cependant, il est possible d'obtenir cet effet avec du JavaScript pur, garantissant la compatibilité entre navigateurs.

Le code fourni implémente une animation de défilement qui fait glisser gracieusement le document vers le haut sur une durée spécifiée. Il s'agit d'une fonction autonome qui peut être appliquée à n'importe quel élément doté d'une barre de défilement, offrant une meilleure expérience utilisateur en lui permettant de revenir rapidement en haut de la page.

1. Signature de fonction :

<code class="javascript">function scrollTo(element, to, duration) {</code>

• element : l'élément à faire défiler, généralement l'élément html ou body.
• to : la position de défilement cible en pixels.
• durée : La durée de l'animation en millisecondes.

2. Logique d'animation :

• Si la durée n'est pas positive , la fonction revient immédiatement.
• La différence entre la position de défilement cible et actuelle est calculée.
• Une valeur parTick est calculée pour déterminer la quantité de défilement incrémentielle par image d'animation.
• À l'aide de setTimeout, la position de défilement est progressivement ajustée à intervalles de 10 millisecondes jusqu'à ce que la cible soit atteinte.

3. Exemple d'utilisation :

Dans l'extrait HTML fourni, un bouton avec l'ID "scrollme" est utilisé comme déclencheur de l'animation :

<code class="javascript">function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)</code>

• Lorsque vous cliquez dessus, la fonction runScroll appelle l'animation scrollTo, faisant défiler la page jusqu'à le sommet sur 600 millisecondes.

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!