Comment créer une animation multi-navigateurs « Défiler vers le haut » avec du JavaScript pur ?

Animation multi-navigateurs « Faire défiler vers le haut » en JavaScript simple

Introduction :

Améliorer l'accessibilité des utilisateurs en fournissant une animation transparente de « défilement vers le haut » est essentiel pour le développement Web moderne. Bien que les bibliothèques JavaScript telles que jQuery offrent des solutions pratiques, l'implémentation de cette fonctionnalité uniquement en JavaScript peut être bénéfique pour une compatibilité légère et entre navigateurs.

Solution :

La fonction JavaScript fournie , scrollTo, vous permet d'implémenter une animation de défilement vers le haut fluide pour n'importe quel élément de page. Il faut trois paramètres :

• element : L'élément HTML que vous souhaitez faire défiler (généralement document.body pour la page entière).
• à  : La position de défilement souhaitée (en pixels).
• durée : La durée de l'animation en millisecondes (fixée à 600 ms pour une animation fluide).

Répartition de la fonction :

• if (durée <= 0) return : Quitte la fonction si la durée de l'animation est inférieure ou égale à zéro.
• var différence = to - element.scrollTop : Calcule la différence entre la position de défilement cible et la position actuelle.
• var perTick = différence / durée * 10 : Déterminez la durée de défilement de chaque intervalle.
• setTimeout(...) : Définissez un délai d'attente pour exécuter la boucle d'animation à intervalles réguliers (10 ms).
• element.scrollTop = element.scrollTop perTick : Mettez à jour la position de défilement par la valeur perTick calculée.
• Si la position de défilement n'est pas encore égale à la cible, la fonction s'appelle elle-même récursivement avec une durée diminuée jusqu'à ce que l'objectif soit atteint.

Utilisation :

Incorporez la fonction scrollTo dans votre HTML :

<code class="html"><button id="scrollme" type="button">Go to Top</button><p>Attachez le gestionnaire d'événements de clic au bouton :</p>
<pre class="brush:php;toolbar:false"><code class="javascript">var scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false);

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

Conclusion :

Cet extrait fournit un outil polyvalent pour créer un cross- animation de défilement vers le haut du navigateur à l'aide de JavaScript natif. Sa simplicité et sa flexibilité le rendent adapté à un large éventail d'applications Web.

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!