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 элемент. В дополнении хочется сказать об особенности работы браузеров с якорями. При нажатии на кнопку назад в браузере, возврат происходит не к предыдущей странице, а предыдущему месту, из которого был переход к якорю (закладке).

Похожие уроки и записи блога

1. Напишите якорь с именем go (вместо <!-- якорь -->)
2. Сделайте ссылку на якорь с этим именем (вместо <!-- ссылка на якорь -->)

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.