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

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:

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

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