Jak utworzyć link do części strony? (haszysz?)

210

Jak łączysz (z <a>), aby przeglądarka przechodziła do niektórych podtytułów na stronie docelowej, a nie na górze?

html xhtml anchor Haroldo
źródło

Odpowiedzi:

275

Jeśli istnieje <a name="foo">tag lub dowolny tag z id(np. <div id="foo">), Możesz po prostu dołączyć #foodo adresu URL. W przeciwnym razie nie możesz arbitralnie linkować do części strony.

Oto kompletny przykład: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Łączenie treści na tym samym przykładzie strony: <a href="#foo">Jump to #foo on same page</a>

Daniel DiPaolo
źródło
60
Tylko uwaga: w HTML5 nie ma już nameatrybutu <a>-elementy: Atrybut nazwy elementu jest nieaktualny. Zastanów się nad umieszczeniem atrybutu id na najbliższym kontenerze.
inserttusernamehere
więc używasz pełnego przykładu lub tego samego przykładu strony? czy pełny przykład nie jest tym samym?
akantoword
2
gdybyśmy mieli spokojną stronę z adresem URL: domain.com/#home?page=1jak używać identyfikatora w href?
iraj jelodari
1
@irajjelodari Na końcu umieścisz skrót:domain.com/?page=1#home
tomsmeding
Musiałem użyć 2 hashtags w url, takich jak: example.com/#RouteName?page=1#ID. jeden do routingu i jeden do nawigacji wewnątrz bieżącej strony. w końcu użyłem trybu HTML5 adresu URL w celu usunięcia hashtagów trasy;) @tomsmeding
iraj jelodari
41

Używasz kotwicy i skrótu. Na przykład:

Cel łącza:

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

Link do celu:

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

Lub w przypadku linków z innej strony:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Michael Aaron Safyan
źródło
8
Broser przeskoczy również do dowolnego elementu o identyfikatorze name_of_target. Nie musisz używać <a>tagu jako celu. Tak więc innym celem może być <h3 id='name_of_target'>Content</h3>.
Cyrille
8
Uwaga: w HTML5 jest to już przestarzałe.
Tim
33

Wystarczy dołączyć skrót do identyfikatora elementu do adresu URL. Na przykład

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

i

http://mysite.com/#about

Tak więc link wyglądałby następująco:

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

Lub tylko

<a href="#about">About</a>
Felix Kling
źródło
21

Oto jak:

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

<div id="go_middle">Hello There</div>
Sarfraz
źródło
2
Ty co? Masz zamknięcie </a>po otwarciu <div ...>- naprawdę nie jestem pewien, co próbujesz tutaj zrobić.
Dominic Rodger
1
skopiowałem moją linię linku i wkleiłem poniżej i zapomniałem zamknąć div. W każdym razie dzięki.
Sarfraz
10

Masz dwie opcje:

Możesz umieścić kotwicę w swoim dokumencie w następujący sposób:

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

Albo podasz identyfikator dowolnemu elementowi HTML:

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

Następnie po prostu dodaj skrót #refdo adresu URL linku, aby przejść do żądanego odwołania. Przykład:

<a href="document.html#ref">Jump to ref in document.html</a>
Daniel Vassallo
źródło
6

W dniu 12 marca 2020 r. WICG dodało wersję roboczą dla fragmentów tekstu , a teraz możesz połączyć się z tekstem na stronie tak, jakbyś go szukał, dodając następujące elementy do skrótu

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

Przykład roboczy nad Chrome Version 81.0.4044.138:

Kliknij ten link Należy ponownie załadować stronę i zaznaczyć tekst linku

Abderrahmane TAHRI JOUTI
źródło