Якорь

Якоря нужны длинным страницам: оглавлению статьи, разделам «Доставка» и «Оплата» на странице условий, кнопке «Наверх», ссылке из письма сразу на нужный пункт договора. При переходе браузер прокручивает страницу к цели и не перезагружает её. Часть адреса после # называется идентификатором фрагмента, и на сервер она не отправляется — её обрабатывает только браузер.

В ранних версиях HTML целью служил пустой тег <a name="delivery">. Сейчас якорем может быть любой элемент с атрибутом id, а атрибут name у ссылок считается устаревшим. В SEO у слова «анкор» другое значение — текст ссылки; о нём рассказывает статья про анкорный текст.

Пример оглавления

<nav>
  <a href="#delivery">Доставка</a>
  <a href="#payment">Оплата</a>
</nav>
<h2 id="delivery">Доставка</h2>
<h2 id="payment">Оплата</h2>

html { scroll-behavior: smooth; }
h2[id] { scroll-margin-top: 80px; }
:target { background: #fff7d6; }

scroll-behavior: smooth делает прокрутку плавной вместо прыжка. scroll-margin-top оставляет над заголовком место под закреплённую шапку страницы, иначе он окажется под ней. Псевдокласс :target подсвечивает элемент, на который ведёт текущий адрес, — посетитель сразу видит, куда попал.

Почему якорь не срабатывает

• Повторяющиеся id. Если на странице два элемента с одинаковым id, браузер перейдёт к первому. Такое случается, когда один и тот же блок выводится дважды — в мобильной и десктопной версии.
• Кириллица в id. Она допустима, но в адресе превращается в длинную последовательность вида %D0%B4…. Короткие латинские идентификаторы удобнее делиться.
• Цель появляется позже. Если раздел подгружается скриптом, при открытии ссылки с якорем браузер не найдёт элемент и останется наверху.
• Плавность без оглядки на настройки. Для пользователей, отключивших анимацию в системе, плавную прокрутку стоит выключить через prefers-reduced-motion.

Якоря и поиск

Поисковые системы считают адреса, отличающиеся только частью после #, одной страницей, поэтому дублей якоря не создают. Google иногда показывает в выдаче ссылки сразу на разделы длинной страницы, если они размечены понятными заголовками с id.