Якоря в HTML: использование и примеры

g

Почему клик по ссылке не приводит туда, куда вы ждали?

Вы вставляете красивую ссылку «Перейти к разделу», но при нажатии страница едва сдвигается или прыгает не туда. Знакомое разочарование? Большинство разработчиков сталкиваются с этим, когда впервые начинают использовать якоря. Проблема кроется не в сложности кода, а в мелких деталях, которые редко объясняют на начальных курсах.

Одна из главных причин — несовпадение атрибута id у целевого элемента и значения в ссылке. HTML строг до дрожи: если в ссылке написано #section-1, а у тега стоит id='section1' (без дефиса), браузер проигнорирует команду. Вторая причина — элементы, которые физически существуют, но скрыты через display: none. Третья — конфликт с фиксированной шапкой, которая наезжает на якорь. Разберём каждый случай по порядку, чтобы вы больше не нервничали.

Главное правило: синтаксис без права на ошибку

Якорь в HTML — это обычная ссылка, которая указывает на элемент с атрибутом id. Но есть нюанс: значение id должно быть уникальным на всей странице. Если вы случайно присвоите один и тот же id двум разным блокам, браузер перестанет понимать, куда прыгать.

Вот как выглядит правильная связка. Ссылка: <a href='#glossary'>Глоссарий</a>. Целевой элемент: <h2 id='glossary'>Термины веб-технологий</h2>. Обратите внимание: в href стоит решётка и имя, а у тега id — то же имя, но без решётки. Никаких пробелов, никаких заглавных букв, если в ссылке все строчные. Браузеры чувствительны к регистру, и #Glossary не найдёт id='glossary'.

Плавная прокрутка: как сделать так, чтобы глаз радовался

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

Достаточно добавить одно CSS-правило в ваш файл стилей: html { scroll-behavior: smooth; }. После этого все внутренние ссылки на якоря начнут анимироваться. У этого метода есть один профессиональный секрет: он работает только для «мягкого» скролла в пределах одной вкладки. Если вы открываете ссылку в новой вкладке, анимации не будет — браузер сразу перебросит к нужному месту. Это нормально, так задумано спецификацией.

Разрушаем мифы: что нельзя делать с якорями

Некоторые советы из старых форумов до сих пор кочуют из проекта в проект. Пора развеять три главных заблуждения. Первый миф: якоря работают только с заголовками. На самом деле вы можете поставить id на любой HTML-элемент: <div>, <p>, <section>, <img>. Второй миф: якорь нельзя использовать для ссылки на другую страницу. Можно! Просто укажите полный URL с решёткой: <a href='https://example.com/page#section'>Читать далее</a>. Третий миф: браузеры игнорируют якоря на динамическом контенте. Нет, современные браузеры отлично находят элементы, добавленные через JavaScript, если они уже существуют в DOM при обработке ссылки.

  1. Якорь на любой элемент: не ограничивайтесь только заголовками. Ставьте id на изображения, формы, блоки с видео.
  2. Ссылки на другие сайты: используйте якоря для перехода к конкретному разделу чужой страницы (если там есть соответствующий id).
  3. Работа с history API: при клике по якорю браузер добавляет запись в историю. Это позволяет использовать кнопку «Назад» для возврата к предыдущему состоянию.
  4. Якоря в мобильной вёрстке: на телефонах якоря работают так же, как на десктопе. Проверяйте только отступы от шапки.
  5. Поведение при загрузке: если открыть страницу с якорем в URL (page#section), браузер автоматически прокрутит к этому элементу после полной загрузки.

Фиксированная шапка: главный враг якорей

Вы спроектировали идеальный сайт с липким меню сверху. Но когда пользователь кликает по якорю, целевой раздел оказывается частично скрытым под шапкой. Это раздражает и создаёт ощущение, что сайт «сломан». Причина в том, что браузер прокручивает страницу ровно до верхней границы элемента с id, а шапка просто наезжает на него.

Профессиональное решение — использовать CSS-свойство scroll-margin-top. Добавьте его к каждому элементу, который является целью якоря: h2, section, div { scroll-margin-top: 80px; } (где 80px — высота вашей фиксированной шапки). Другой вариант — добавить невидимый псевдоэлемент перед блоком с отступом. Оба метода дают одинаковый результат: после прокрутки вы видите заголовок, а не логотип компании.

Пример из реальной практики: навигация по глоссарию

Представьте, что вы создаёте страницу глоссария с сотней терминов по веб-технологиям. Без якорей посетителю придётся скроллить бесконечно. Решение — в начале страницы разместить алфавитный указатель. Каждая буква — это ссылка на соответствующий блок терминов.

Разметка выглядит так. Сначала список ссылок: <nav><a href='#letter-a'>A</a> <a href='#letter-b'>B</a></nav>. Затем для каждой буквы создаёте контейнер: <div id='letter-a' class='term-group'><h3>A</h3>...</div>. Добавляете стили с scroll-margin-top, чтобы шапка не перекрывала заголовок. В результате пользователь мгновенно переходит к нужной букве, а сайт выглядит профессионально и дружелюбно. И никакого JavaScript — только чистый HTML и пара строк CSS.

Итоговый результат: что вы получаете после внедрения

Когда вы правильно настроите якоря, посетитель перестаёт путаться в навигации. Страница становится интуитивно понятной: вы кликаете на ссылку и оказываетесь ровно там, где ожидали. Исчезает раздражение от «сломанного» меню и пропадающих под шапкой заголовков. Сайт обретает законченный, профессиональный вид.

Теперь вы знаете не только базовый синтаксис, но и скрытые приёмы: как бороться с фиксированной шапкой, как делать плавную прокрутку и как ссылаться на чужие страницы. Примените эти знания в своём следующем проекте. Якоря — это не пережиток HTML4, а мощный инструмент юзабилити, который ценят и пользователи, и поисковые системы. Сделайте навигацию удобной — и посетители скажут вам спасибо тем, что останутся на сайте дольше.

Добавлено: 27.04.2026