Heim >Web-Frontend >js-Tutorial >Wie scrolle ich mit JavaScript zu bestimmten Ankern auf einer Webseite?

Wie scrolle ich mit JavaScript zu bestimmten Ankern auf einer Webseite?

Mary-Kate OlsenOriginal: 2024-11-17 18:39:02439Durchsuche

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

Navigieren von Webseiten zu bestimmten Ankern mit JavaScript

Das Navigieren einer Webseite zu einem bestimmten Anker kann mit JavaScript durch die Verwendung des Standorts erreicht werden. Hash-Eigenschaft. Anker werden in HTML mithilfe der Namens- oder ID-Attribute angegeben.

Code:

Der folgende JavaScript-Code bietet eine einfache Lösung, um auf der Seite zu einem bestimmten Anker zu scrollen:

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

Verwendung:

Diese Funktion benötigt einen einzelnen Parameter, Hash, der dem Namen oder der ID des Ankers entspricht. Durch den Aufruf von scrollTo('anchorName') wird die Seite zu dem Element mit dem angegebenen AnchorName gescrollt.

Beispiel:

In der folgenden HTML-Struktur:

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

Durch den Aufruf von scrollTo('section2') wird die Seite reibungslos zum Abschnitt mit dem Abschnitt2-Anker gescrollt. Dies imitiert den Effekt eines direkten Zugriffs auf die URL http://server.com/path#section2 und stellt sicher, dass der Anker oben auf der Seite sichtbar ist.

Hinweis:

Diese Methode erfordert weder jQuery noch zusätzliche Bibliotheken und funktioniert effektiv auf verschiedenen Browsern.

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

JavaScript jquery html require using Property function this location http

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

Vorheriger Artikel：Wie kann ich eine Zeichenfolge in JavaScript mehrmals wiederholen?Nächster Artikel：Wie kann ich eine Zeichenfolge in JavaScript mehrmals wiederholen?

In Verbindung stehende Artikel

Mehr sehen