47. Якоря в HTML
Якорь, это некая закладка на странице. Чтобы быстро перейти к какой-либо части на странице, используют якорь. Якорь делается просто: в нужном месте пишут ссылку <a>
, дать ей имя при помощи атрибута name
, далее пишут еще одну ссылку, уже из того места, откуда нам нужно перейти к якорю, но пишут ее с атрибутом href
, в значении указывается символ решетка (#
), а далее пишется имя закладки (якоря). Далее пример:
<a name = "top"></a>
<p height = "2000px"></p>
<a href = "#top">Наверх</a>
Между тегами <a> ... </a>
в закладке текст необязателен, так как мы просто указываем место перехода. Ссылка на закладку может быть с любой страницы. Далее пример:
<a href = "http://codebra.ru#bottom">Перейти к нижней части текста</a>
UPD: 2022 год.
Атрибут name
использовать больше не нужно. Вместо него используйте уникальный идентификатор id
, с которым вы познакомились в этом уроке. Далее пример:
<div id = "top"></div>
<p height = "2000px"></p>
<a href = "#top">Наверх</a>
То есть якорем может быть любой HTML элемент. В дополнении хочется сказать об особенности работы браузеров с якорями. При нажатии на кнопку назад в браузере, возврат происходит не к предыдущей странице, а предыдущему месту, из которого был переход к якорю (закладке).
Похожие уроки и записи блога
- Напишите якорь с именем
go
(вместо <!-- якорь -->) - Сделайте ссылку на якорь с этим именем (вместо <!-- ссылка на якорь -->)
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.