Как сделать закладку на странице сайта - якори в HTML

17.12.18 ИТ / HTML 20005

Иногда требуется сделать так, чтобы посетитель не просто перешел на страницу, но и попал на определенное ее место. Для этого используются якори HTML.

Якорь (анкор) – это название технологии закладки на странице сайта, то есть метки, на которую осуществляется возврат посетителя с любого другого места. Сделать закладку на странице сайта очень просто. Делать закладки можно не только на текущую страницу, но и на другие. HTML-якори могут быть очень полезны в разных случаях, например, для создания навигации на объемных страницах с подпунктами, для создания простых закладок и т.д.

Небольшой пример:

<h2>Ссылки на якори</h2>
<p><a href="#anchor1">Перейти к якорю 1</a></p>
<p><a href="#anchor2">Перейти к якорю 2</a></p>
<p><a href="#anchor3">Перейти к якорю 3</a></p>

<h2>Якори на странице</h2>
<p id="anchor1">Якорь на странице 1</p>
<p id="anchor2">Якорь на странице 2</p>
<p id="anchor3">Якорь на странице 3</p>

Как видно, достаточно прописать у нужного тега атрибут id и сослаться на него в ссылке после знака #. Ранее вместо id использовался атрибут name, но в HTML5 это изменилось. Если на странице содержится ссылка на якорь, но якоря нет - ошибка не произойдет. Такое свойство якорей часто используется в JavaScript для обработки нажатия на ссылки.

Важно заметить, что после клика на якорь в пределах текущей страницы, навигация в браузере меняется – кнопки назад и вперед учитывают сделанные клики. Поэтому придется нажать кнопку назад несколько раз, пока будет выполнен переход на предыдущую страницу. А для того, чтобы сделать плавный переход на якорь, необходимо использовать JavaScript.