Якорная ссылка — ссылка, которая ведет к определенному элементу или разделу страницы с помощью его идентификатора.
В статье разберем, что такое якорная ссылка, как она работает, из каких элементов состоит HTML-якорь, где применяется такая навигация и чем она отличается от обычной ссылки.
Как работает якорная ссылка
Обычная ссылка часто переводит пользователя на другую страницу или сайт. Якорная позволяет сразу перейти к определенному месту документа.
Например, в верхней части длинной страницы расположена кнопка «Отзывы», а соответствующий раздел находится значительно ниже. При нажатии браузер прокручивает страницу непосредственно к блоку с отзывами.
Для этого целевому элементу назначается идентификатор:
<div id="reviews">...</div>
Ссылка на него выглядит следующим образом:
<a href="#reviews">Перейти к отзывам</a>
Знак # указывает на фрагмент страницы, а значение reviews соответствует атрибуту id целевого элемента.
Из чего состоит HTML-якорь
Для простого перехода достаточно ссылки и элемента с соответствующим идентификатором.
| Элемент | Назначение |
|---|---|
href="#reviews" |
Указывает, к какому фрагменту перейти |
#reviews |
Идентификатор фрагмента в URL |
id="reviews" |
Определяет целевой элемент страницы |
<a> |
Создает кликабельную ссылку |
Значения в href и id должны соответствовать друг другу. Если ссылка содержит #reviews, браузер будет искать элемент с id="reviews".
Где используются якорные ссылки
Такая навигация особенно удобна на длинных страницах. Якорные ссылки можно встретить в меню одностраничных сайтов, оглавлениях статей, FAQ, документации, каталогах и лендингах.
Например, пункты «Характеристики», «Отзывы», «Доставка» и «Контакты» могут вести непосредственно к соответствующим разделам одной страницы.
Кнопка с призывом к действию также может использовать якорь для перехода к форме заказа или регистрации, если она расположена ниже по странице.
Якорная и обычная ссылка — в чем разница
Основное различие заключается в назначении перехода.
Обычная ссылка чаще используется для открытия другого URL, тогда как якорная ссылка указывает на конкретный фрагмент документа.
При этом якорь может использоваться и в полном URL:
example.com/page#reviews
В этом случае браузер сначала открывает указанную страницу, а затем переходит к элементу reviews. Поэтому якорные ссылки не ограничиваются переходами исключительно внутри уже открытой страницы.
Плавная прокрутка к якорю
По умолчанию переход может происходить практически мгновенно. Если необходим эффект плавной прокрутки, его можно настроить через CSS:
scroll-behavior: smooth;
Так пользователь визуально видит перемещение от текущего участка страницы к целевому блоку.
При использовании фиксированной шапки сайта также важно учитывать отступ: иначе заголовок целевого раздела после перехода может оказаться скрыт под меню.
Якорные ссылки и аналитика
Переход по якорю обычно не является новым просмотром страницы сам по себе. Однако нажатия на такие ссылки можно отдельно фиксировать как события средствами веб-аналитики.
Это позволяет оценивать, какие разделы интересуют посетителей, как они взаимодействуют с навигацией и какие кнопки чаще приводят к нужным блокам.
Якорные ссылки упрощают навигацию по длинным страницам и позволяют пользователю быстро перейти непосредственно к нужному разделу без ручной прокрутки всего контента.
Занимаюсь развитием контента Affelist: публикую новости индустрии, добавляю актуальные события и конференции, обновляю разделы с компаниями и специалистами CPA-рынка. Слежу за главными изменениями в affiliate-маркетинге, чтобы пользователи всегда имели доступ к свежей и полезной информации.
