Comment puis-je implémenter une animation de défilement vers le haut multi-navigateurs à l'aide de JavaScript pur ?

Animation de défilement vers le haut JavaScript multi-navigateurs (sans jQuery)

De nombreux développeurs Web s'appuient sur jQuery pour une fonctionnalité de défilement de page fluide. Cependant, pour ceux qui préfèrent éviter les bibliothèques externes, il existe une solution simple pour faire défiler vers le haut d'une page en utilisant du JavaScript pur.

Pour réaliser une animation de défilement vers le haut entre navigateurs, suivez ces étapes :

1. Définir la fonction scrollTo : Créez une fonction qui prend trois paramètres : élément, to et durée. Cette fonction gérera l'animation.

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

2. Calculer la différence et l'incrément par tick : à l'intérieur de la fonction, calculez la différence entre la position de défilement actuelle et la position souhaitée (to) et divisez-la par la durée pour déterminer l'incrément par tick.

   <code class="javascript">  if (duration <= 0) return;
     var difference = to - element.scrollTop;
     var perTick = difference / duration * 10;

3. Définissez la boucle d'animation : utilisez setTimeout pour définir une boucle d'animation qui s'exécute à une fréquence de 10 millisecondes. Dans la boucle, incrémentez la position de défilement par incrément par tick, en vérifiant si la position souhaitée a été atteinte.

   <code class="javascript">  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

4. Utilisation : Pour faire défiler en douceur en haut d'une page, appelez la fonction scrollTo comme ceci :

   <code class="javascript">scrollTo(document.body, 0, 600);

5. Ajouter un écouteur d'événement de clic : si vous avez un lien ou un bouton qui devrait déclenchez l'animation de défilement, ajoutez un écouteur d'événement de clic pour appeler la fonction lorsque vous cliquez dessus.

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

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

Ce code JavaScript pur fournit un moyen simple mais efficace d'obtenir des résultats multi-navigateurs faites défiler vers le haut des animations, vous permettant d'améliorer la navigation de l'utilisateur sans avoir besoin de bibliothèques externes comme jQuery.

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!