Что такое 'якорь' в контексте веб-разработки?

Якорь в веб-разработке — это идентификатор (HTML-атрибут id) элемента на странице, позволяющий создать ссылку на конкретное место внутри этой же или другой HTML-страницы. При клике по такой ссылке браузер прокручивает страницу до элемента с указанным якорем.

<a href="#section2">Перейти ко второму разделу</a>

<h2 id="section2">Второй раздел</h2>

Якоря также используются для формирования URL-адресов с фрагментным идентификатором, например: https://example.com/page#section2.

Помимо ручной установки атрибута id, многие браузеры автоматически создают якоря для заголовков (<h1> - <h6>) при наведении или фокусировке, что удобно для создания ссылок на разделы контента.

Типичные сценарии использования:

• Навигация внутри длинных страниц (одностраничные приложения, статьи).
• Создание содержания с кликабельными пунктами.
• Прямые ссылки на определенные секции контента из внешних источников.

Технически, якорь обрабатывается браузером на клиентской стороне, без запроса к серверу, если ссылка ведет на ту же страницу.

// Получение элемента по якорю из URL
const anchorId = window.location.hash.substring(1); // Удаляем символ '#'

if (anchorId) {
  const targetElement = document.getElementById(anchorId);
  if (targetElement) {
    // Можно использовать прокрутку с плавным эффектом
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
}