Wie verlinke ich einen Teil einer Seite? (Hash?)

210

Wie verknüpfen Sie (mit <a>), damit der Browser zu einer bestimmten Unterüberschrift auf der Zielseite und nicht zu der obersten wechselt?

html xhtml anchor Haroldo
quelle

Antworten:

275

Wenn es ein <a name="foo">Tag oder ein Tag mit einem id(z. B. <div id="foo">) gibt, können Sie einfach #fooan die URL anhängen . Andernfalls können Sie nicht willkürlich auf Teile einer Seite verlinken.

Hier ist ein vollständiges Beispiel: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Beispiel für das Verknüpfen von Inhalten auf derselben Seite: <a href="#foo">Jump to #foo on same page</a>

Daniel DiPaolo
quelle
60
Nur eine Anmerkung: In HTML5 gibt es kein name-attribute für <a>-elements mehr: Das name-Attribut für das a-Element ist veraltet. Ziehen Sie stattdessen in Betracht, ein ID-Attribut auf den nächsten Container zu setzen.
Insertusernamehere
Verwenden Sie also das vollständige Beispiel oder das gleiche Seitenbeispiel? Ist das vollständige Beispiel nicht dasselbe?
Akantoword
2
Wenn wir eine erholsame Seite mit einer URL hätten wie: domain.com/#home?page=1Wie verwende ich eine ID in href?
Iraj Jelodari
1
@irajjelodari Sie würden den Hash am Ende setzen:domain.com/?page=1#home
Tomsmeding
Ich musste 2 Hashtags in der URL verwenden wie : example.com/#RouteName?page=1#ID. eine für das Routing und eine für die Navigation innerhalb der aktuellen Seite. Schließlich habe ich den HTML5-Modus der URL verwendet, um Routen-Hashtags zu entfernen;) @tomsmeding
iraj jelodari
41

Sie verwenden einen Anker und einen Hash. Beispielsweise:

Ziel des Links:

 <a name="name_of_target">Content</a>

Link zum Ziel:

 <a href="#name_of_target">Link Text</a>

Oder wenn Sie von einer anderen Seite aus verlinken:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Michael Aaron Safyan
quelle
8
Der Broser springt auch zu jedem Element mit der ID name_of_target. Sie müssen kein <a>Tag als Ziel verwenden. So könnte ein anderes Ziel sein <h3 id='name_of_target'>Content</h3>.
Cyrille
8
Beachten Sie, dass dies in HTML5 jetzt veraltet ist.
Tim
32

Fügen Sie einfach einen Hash mit der ID eines Elements an die URL an. Z.B

<div id="about"></div>

und

http://mysite.com/#about

Der Link würde also so aussehen:

<a href="http://mysite.com/#about">About</a>

oder nur

<a href="#about">About</a>
Felix Kling
quelle
21

Hier ist, wie:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>
Sarfraz
quelle
2
Sie was? Sie haben </a>nach einer Eröffnung einen Abschluss <div ...>- nicht wirklich sicher, was Sie hier versuchen.
Dominic Rodger
1
Ich habe meine Linkzeile kopiert und unten eingefügt und vergessen, das Div zu schließen. Trotzdem danke.
Sarfraz
10

Sie haben zwei Möglichkeiten:

Sie können entweder wie folgt einen Anker in Ihr Dokument einfügen:

<a name="ref"></a>

Oder Sie geben einem beliebigen HTML-Element eine ID:

<h1 id="ref">Heading</h1>

Fügen Sie dann einfach den Hash #refan die URL Ihres Links an, um zur gewünschten Referenz zu springen. Beispiel:

<a href="document.html#ref">Jump to ref in document.html</a>
Daniel Vassallo
quelle
6

Am 12. März 2020 hat ein Entwurf von WICG für hinzugefügt Textfragmente , und jetzt können Sie Text auf einer Seite verlinkt , als ob Sie es mit dem Hash indem Sie die folgenden Suche wurden

#:~:text=<Text To Link to>

Arbeitsbeispiel zu Chrome Version 81.0.4044.138:

Klicken Sie auf diesen Link. Sollte die Seite neu laden und den Text des Links markieren

Abderrahmane TAHRI JOUTI
quelle