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

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