Wie scrolle ich mit JavaScript zu bestimmten Ankern auf einer Webseite?-js-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-11-17 18:39:02

Original

448 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!