Heim >Web-Frontend >js-Tutorial >Wie scrolle ich mit JavaScript zu einem bestimmten Anker auf einer HTML-Seite?
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!