Heim >Web-Frontend >js-Tutorial >Wie scrolle ich mit JavaScript zu einem bestimmten Anker auf einer HTML-Seite?

Wie scrolle ich mit JavaScript zu einem bestimmten Anker auf einer HTML-Seite?

Susan Sarandon
Susan SarandonOriginal
2024-11-15 15:48:03461Durchsuche

How to Scroll to a Specific Anchor on an HTML Page Using JavaScript?

Scrollen zu einem bestimmten Anker auf einer HTML-Seite

JavaScript bietet eine bequeme Möglichkeit, eine HTML-Seite zu einem bestimmten Anker zu scrollen und ermöglicht so z nahtlose Navigation innerhalb des Dokuments.

Problem:

Sie möchten scrollen Browserseite zu einem bestimmten Anker, wenn auf eine Schaltfläche geklickt wird oder ein bestimmtes Ereignis auftritt. Der Zielanker kann ein Namensattribut oder ein ID-Attribut haben.

Antwort:

Mit der folgenden JavaScript-Funktion können Sie diese Funktionalität erreichen:

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

Implementierung:

Um diese Funktion zu verwenden, rufen Sie sie einfach mit dem Namen des Ankers auf oder ID als Parameter. Wenn Sie beispielsweise einen Anker mit der ID „myAnchor“ haben, würden Sie die Funktion wie folgt aufrufen:

scrollTo("myAnchor");

Diese Technik nutzt die Tatsache aus, dass die Eigenschaft „location.hash“ automatisch aktualisiert wird, wenn Der Browser scrollt zu einem Anker. Indem Sie den location.hash auf den gewünschten Anker setzen, zwingen Sie den Browser, zu diesem Ort zu scrollen.

Hinweis:

Es sind keine externen Bibliotheken (wie z. B. jQuery) vorhanden erforderlich, um diese Funktionalität zu implementieren. Es funktioniert nativ in allen gängigen Browsern.

Das obige ist der detaillierte Inhalt vonWie scrolle ich mit JavaScript zu einem bestimmten Anker auf einer HTML-Seite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn