recherche

Maison >interface Web >js tutoriel >Comment puis-je faire défiler vers le haut d'une page Web à l'aide de JavaScript ?

Comment puis-je faire défiler vers le haut d'une page Web à l'aide de JavaScript ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-29 01:40:11646parcourir

How Can I Scroll to the Top of a Web Page Using JavaScript?

Faire défiler vers le haut d'une page Web avec JavaScript

Se déplacer vers le haut d'une page Web avec JavaScript est une tâche courante, en particulier lorsqu'un défilement instantané est souhaité. Ceci peut être facilement réalisé en utilisant la méthode window.scrollTo() intégrée, qui vous permet de spécifier la position souhaitée sur la page.

Code JavaScript :

Pour faire défiler instantanément vers le haut de la page, utilisez la commande suivante code :

window.scrollTo(0, 0);

Paramètres :

  • xCoord : La coordonnée horizontale (en pixels) vers laquelle faire défiler. Réglez-le sur 0 pour faire défiler vers le bord gauche.
  • yCoord : La coordonnée verticale (en pixels) vers laquelle faire défiler. Réglez-le sur 0 pour faire défiler vers le haut.

En passant 0 pour xCoord et yCoord, vous pouvez faire défiler instantanément vers le coin supérieur gauche de la page.

Exemple d'utilisation :

<!DOCTYPE html>
<html>
<body>
<p>Scroll down this page and then click the button.</p>

<button onclick="window.scrollTo(0, 0)">Scroll to Top</button>
</body>
</html>

Lorsque vous cliquez sur le bouton, la page passe instantanément au haut.

Remarque : Si vous souhaitez obtenir un défilement fluide avec une animation, pensez à utiliser des plugins ou des frameworks JavaScript.

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!

JavaScript edge if for using this position animation
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment inclure des fonctions externes dans votre application Node.js ?Article suivant：Comment inclure des fonctions externes dans votre application Node.js ?

Articles Liés

Voir plus