Come collego a una parte di una pagina? (Hash?)

210

Come si collega (con <a>) in modo che il browser passi a determinati sottotitoli nella pagina di destinazione anziché in alto?

html xhtml anchor

— Haroldo
fonte

275

Se è presente un <a name="foo">tag o un tag con un id(ad esempio, <div id="foo">), puoi semplicemente aggiungere #fool'URL. Altrimenti, non puoi collegarti arbitrariamente a parti di una pagina.

Ecco un esempio completo: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Collegamento di contenuti sullo stesso esempio di pagina: <a href="#foo">Jump to #foo on same page</a>

— Daniel DiPaolo
fonte

60

Solo una nota: in HTML5 non c'è più name-attributo per -elementi <a>: l'attributo name sull'elemento a è obsoleto. Valuta invece di mettere un attributo id sul contenitore più vicino.

— insertusernamehere

quindi usi l'esempio completo o lo stesso esempio di pagina? l'esempio completo non è la stessa cosa?

— Akantoword

2

se avessimo una pagina riposante con url come: domain.com/#home?page=1come usare un id in href?

— iraj jelodari,

1

@irajjelodari Alla fine avresti messo l'hash:domain.com/?page=1#home

— tomsmeding

ho dovuto usare 2 hashtags nella url del tipo: example.com/#RouteName?page=1#ID. uno per il routing e uno per la navigazione all'interno della pagina corrente. finalmente ho usato la modalità html5 di URL per rimuovere gli hashtag di percorso;) @tomsmeding

— iraj jelodari

41

Usi un'ancora e un hash. Per esempio:

Target del collegamento:

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

Link al target:

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

Oppure, se il collegamento da una pagina diversa:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

— Michael Aaron Safyan
fonte

8

Il broser salterà anche a qualsiasi elemento con l'id name_of_target. Non è necessario utilizzare un <a>tag come destinazione. Quindi un altro obiettivo potrebbe essere <h3 id='name_of_target'>Content</h3>.

— Cyrille,

8

Nota che ora è obsoleto in HTML5.

— Tim

33

Basta aggiungere un hash con un ID di un elemento all'URL. Per esempio

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

e

http://mysite.com/#about

Quindi il collegamento sarebbe simile a:

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

o solo

<a href="#about">About</a>

— Felix Kling
fonte

21

Ecco come:

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

<div id="go_middle">Hello There</div>

— Sarfraz
fonte

2

Tu cosa? Hai una chiusura </a>dopo un'apertura <div ...>, non sei sicuro di cosa stai cercando di fare qui.

— Dominic Rodger,

1

ho copiato la mia linea di collegamento e incollato di seguito e ho dimenticato di chiudere il div. Grazie comunque.

— Sarfraz,

10

Hai due opzioni:

Puoi inserire un'ancora nel tuo documento come segue:

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

Oppure dai un id a qualsiasi elemento HTML:

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

Quindi aggiungi semplicemente l'hash #refall'URL del tuo link per passare al riferimento desiderato. Esempio:

<a href="document.html#ref">Jump to ref in document.html</a>

— Daniel Vassallo
fonte

6

Il 12 marzo 2020, WICG ha aggiunto una bozza per Frammenti di testo e ora puoi collegarti al testo in una pagina come se lo stessi cercando aggiungendo quanto segue all'hash

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

Esempio di lavoro su Chrome Version 81.0.4044.138:

Fai clic su questo link Dovresti ricaricare la pagina ed evidenziare il testo del link

— Abderrahmane TAHRI JOUTI
fonte