Maison > Article > interface Web > Comment faire défiler jusqu'à des ancres spécifiques sur une page Web à l'aide de JavaScript ?

Comment faire défiler jusqu'à des ancres spécifiques sur une page Web à l'aide de JavaScript ?

Mary-Kate Olsenoriginal: 2024-11-17 18:39:02373parcourir

How to Scroll to Specific Anchors on a Web Page using JavaScript?

Navigation de pages Web vers des ancres spécifiques à l'aide de JavaScript

La navigation d'une page Web vers une ancre spécifique peut être réalisée avec JavaScript en utilisant l'emplacement. propriété de hachage. Les ancres sont spécifiées en HTML à l'aide des attributs name ou id.

Code :

Le code JavaScript suivant fournit une solution simple pour faire défiler la page jusqu'à une ancre donnée :

function scrollTo(hash) {
    location.hash = "#" + hash;
}

Utilisation :

Cette fonction prend un seul paramètre, hash, qui correspond au nom ou à l'identifiant de l'ancre. L'appel de scrollTo('anchorName') fera défiler la page jusqu'à l'élément avec le AnchorName spécifié.

Exemple :

Dans la structure HTML suivante :

<html>
<body>
    <a name="section1">...</a>
    <a name="section2">...</a>
</body>
</html>

Appeler scrollTo('section2') ferait défiler la page en douceur jusqu'à la section avec l'ancre section2. Cela imite l'effet d'un accès direct à l'URL http://server.com/path#section2, garantissant que l'ancre est visible en haut de la page.

Remarque :

Cette méthode ne nécessite pas jQuery ni aucune bibliothèque supplémentaire et fonctionne efficacement sur différents navigateurs.

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 jquery html require using Property function this location http

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 puis-je répéter une chaîne plusieurs fois en JavaScript ?Article suivant：Comment puis-je répéter une chaîne plusieurs fois en JavaScript ?

Articles Liés

Voir plus