Comment faire défiler jusqu'à des ancres spécifiques sur une page Web à l'aide de JavaScript ?-js tutoriel-php.cn

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

Mary-Kate Olsen

Libérer： 2024-11-17 18:39:02

original

372 Les gens l'ont consulté

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;
}

Copier après la connexion

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>

Copier après la connexion

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!