Как мне сделать ссылку на часть страницы? (Хэш?)

210

Как вы связываете (с <a>), чтобы браузер переходил к определенным подзаголовкам на целевой странице, а не к вершине?

html xhtml anchor Haroldo
источник

Ответы:

275

Если есть <a name="foo">тег или любой тег с id(например, <div id="foo">), то вы можете просто добавить #fooURL. В противном случае, вы не можете произвольно ссылаться на части страницы.

Вот полный пример: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Связывание контента на том же примере страницы: <a href="#foo">Jump to #foo on same page</a>

Даниэль ДиПаоло
источник
60
Просто примечание: в HTML5 больше нет name-attribute для <a>-elements: атрибут name в элементе a устарел. Попробуйте вместо этого поместить атрибут id в ближайший контейнер.
insertusername здесь
так вы используете полный пример или тот же пример страницы? не полный ли это пример?
akantoword
2
если бы у нас была спокойная страница с URL-адресом: domain.com/#home?page=1как использовать идентификатор в href?
Ирадж Джелодари
1
@irajjelodari Вы бы поставили хеш в конце:domain.com/?page=1#home
Томсминг
я должен был использовать 2 хештегов в URL , как: example.com/#RouteName?page=1#ID. один для маршрутизации и один для навигации внутри текущей страницы. наконец, я использовал html5 режим URL для удаления хештегов маршрута;) @tomsmeding
iraj jelodari
41

Вы используете якорь и хеш. Например:

Цель ссылки:

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

Ссылка на цель:

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

Или, если ссылка с другой страницы:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Майкл Аарон Сафян
источник
8
Броузер также перейдет к любому элементу с идентификатором name_of_target. Вам не нужно использовать <a>тег в качестве цели. Так что еще одна цель может быть <h3 id='name_of_target'>Content</h3>.
Сирил
8
Обратите внимание, что это теперь устарело в HTML5.
Тим
33

Просто добавьте хеш с идентификатором элемента в URL. Например

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

и

http://mysite.com/#about

Так что ссылка будет выглядеть так:

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

или просто

<a href="#about">About</a>
Феликс Клинг
источник
21

Вот как:

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

<div id="go_middle">Hello There</div>
Sarfraz
источник
2
Ты что? У вас есть закрытие </a>после открытия <div ...>- не совсем уверен, что вы пытаетесь сделать здесь.
Доминик Роджер
1
я скопировал свою ссылку и вставил ниже и забыл закрыть div. В любом случае спасибо.
Сарфраз
10

У вас есть два варианта:

Вы можете добавить якорь в ваш документ следующим образом:

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

Или же вы даете идентификатор любому элементу HTML:

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

Затем просто добавьте хеш #refк URL вашей ссылки, чтобы перейти к нужной ссылке. Пример:

<a href="document.html#ref">Jump to ref in document.html</a>
Даниэль Вассалло
источник
6

12 марта 2020 г. WICG добавил текст для фрагментов текста , и теперь вы можете ссылаться на текст на странице, как если бы вы искали его, добавив следующее в хеш

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

Рабочий пример на Chrome Version 81.0.4044.138:

Нажмите на эту ссылку. Необходимо перезагрузить страницу и выделить текст ссылки.

Абдеррахман ТАХРИ ДЖОУТИ
источник