Maison >interface Web >js tutoriel >Comment faire défiler jusqu'à une ancre spécifique en HTML avec JavaScript ?

Comment faire défiler jusqu'à une ancre spécifique en HTML avec JavaScript ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-30 01:30:09987parcourir

How to Scroll to a Specific Anchor in HTML with JavaScript?

Faire défiler une page HTML vers une ancre spécifique à l'aide de JavaScript

Problème :

Besoin de faire défiler par programme une page HTML pour une ancre spécifique utilisant uniquement JavaScript. Vous avez attribué un attribut name ou id à l'ancre souhaitée, par exemple :

<a name="anchorName"></a>
<h1>

L'objectif est de reproduire l'effet de la navigation manuelle vers une URL avec un fragment d'ancre, tel que http://server. com/path#anchorName.

Solution :

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

Cette fonction JavaScript fait défiler le page à l’ancre en définissant la propriété location.hash. La propriété location.hash représente le fragment d'ancrage de l'URL actuelle. En attribuant le nom d'ancre souhaité à cette propriété, le navigateur fera automatiquement défiler la page jusqu'à la position appropriée.

Contrairement à de nombreuses autres solutions, cette méthode ne nécessite aucune bibliothèque externe comme jQuery.

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!

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