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 transparente. 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 sur plusieurs navigateurs, suivez ces étapes :

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

   function scrollTo(element, to, duration) {

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 (vers) et divisez-la par la durée pour déterminer le par tick incrément.

     if (duration 

3. Définir 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.

     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 vers le haut d'une page, appelez la fonction scrollTo comme ceci :

   scrollTo(document.body, 0, 600);

5. Ajouter un écouteur d'événement de clic : Si vous disposez d'un lien ou d'un bouton qui doit déclencher l'animation de défilement, ajoutez un écouteur d'événement de clic pour appeler la fonction lorsque vous cliquez dessus.

   To the top

   var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);

Ce code JavaScript pur fournit un moyen simple mais efficace de réaliser des animations de défilement vers le haut entre navigateurs, vous permettant d'améliorer l'utilisateur navigation sans avoir besoin de bibliothèques externes comme jQuery.