Якорные ссылки в HTML5: решаем проблему с фиксированной шапкой и скроллом

Обновлено 2026/05/19

Длинные инструкции, техническая документация и справочные материалы почти всегда требуют удобной навигации. Якорные ссылки остаются базовым, но по-прежнему крайне эффективным инструментом для быстрого перехода к нужному разделу страницы. А ещё, якоря напрямую влияют на поведенческие факторы: уменьшают глубину скролла, ускоряют доступ к информации и повышают удобство длинных страниц.

Якорные ссылки в HTML5

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

Пример ссылки на раздел: перейти к разделу-примеру.

В отличие от устаревшего подхода с name (который больше не используется), современный якорь полностью основан на идентификаторах DOM.

Базовая реализация якорей

Современная структура выглядит максимально просто и соответствует стандартам HTML5:

<!-- Якорь через id -->
<section id="example-section">
 <h2>Раздел документа</h2>
 <p>Содержимое блока...</p>
</section>

<!-- Ссылка на якорь -->
<a href="#example-section">перейти к разделу-примеру</a>

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

Плавный скролл к якорю (CSS)

Современные браузеры позволяют реализовать плавную прокрутку без JavaScript — достаточно одной строки CSS.

html {
 scroll-behavior: smooth;
}

Это решение заменяет устаревшие JS-анимации и улучшает пользовательский опыт без дополнительной нагрузки на страницу.

Проблема фиксированной шапки и её решение

Одна из типичных проблем современных сайтов — перекрытие заголовка фиксированным header-ом при переходе по якорю.

Решается это через свойство scroll-margin-top, которое задаёт отступ при прокрутке к элементу.

h2, section {
 scroll-margin-top: 80px;
}

Теперь при переходе по ссылке заголовок не уходит под меню и остаётся полностью читаемым.

Автоматическое оглавление без jQuery (Vanilla JS + IntersectionObserver)

Современный подход к генерации оглавления — отказ от jQuery в пользу нативного JavaScript и API наблюдения за элементами.

HTML-структура:

<nav class="toc">
 <h2>Содержание</h2>
 <ul id="toc-list"></ul>
</nav>

<article id="content">
 <h2 id="section-1">Первый раздел</h2>
 <h2 id="section-2">Второй раздел</h2>
 <h2 id="section-3">Третий раздел</h2>
</article>

JavaScript (генерация + подсветка активного пункта):

document.addEventListener("DOMContentLoaded", () => {
 const headings = document.querySelectorAll("#content h2");
 const tocList = document.getElementById("toc-list");

 headings.forEach(h => {
 const id = h.id;
 const text = h.textContent;

 const li = document.createElement("li");
 const a = document.createElement("a");

 a.href = `#${id}`;
 a.textContent = text;

 li.appendChild(a);
 tocList.appendChild(li);
 });

 // Подсветка активного раздела
 const observer = new IntersectionObserver(entries => {
 entries.forEach(entry => {
 const id = entry.target.id;
 const link = document.querySelector(`a[href="#${id}"]`);

 if (entry.isIntersecting) {
 document.querySelectorAll(".toc a").forEach(a => a.classList.remove("active"));
 link?.classList.add("active");
 }
 });
 }, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });

 headings.forEach(h => observer.observe(h));
});

Современные стили оглавления

.toc {
 position: sticky;
 top: 20px;
 padding: 16px;
 background-color: #f5f5f5;
 border-radius: 8px;
 max-width: 280px;
}

.toc ul {
 padding: 0;
 list-style: none;
}

.toc a {
 display: block;
 padding: 6px 0;
 text-decoration: none;
 color: #333;
}

.toc a.active {
 font-weight: 600;
 color: #000;
}

html {
 scroll-behavior: smooth;
}

h2 {
 scroll-margin-top: 80px;
}

UX-улучшения, которые стали стандартом

Современные якорные системы почти всегда дополняются дополнительными улучшениями:

• плавная прокрутка без сторонних библиотек;
• адаптивное оглавление с sticky-панелью;
• подсветка активного раздела при скролле;
• учёт фиксированных шапок через scroll-margin-top;
• семантическая структура через section/article/nav.