Как сделать содержание сайта: оглавление статьи с якорями

Содержание на длинной странице сайта можно сделать списком ссылок на её разделы. Читатель нажимает пункт и переходит к нужному заголовку без новой страницы. Здесь речь об оглавлении одной статьи или инструкции, а не о перечне всех страниц сайта: для общей архитектуры есть разбор разделов сайта.

Когда оглавление действительно нужно

Оглавление помогает, если материал отвечает на несколько самостоятельных вопросов и человек может сразу выбрать нужный раздел. Для короткой страницы с одним действием оно добавит лишний экран. Сначала проверьте структуру: один главный заголовок, затем разделы с понятными названиями и при необходимости подразделы. W3C объясняет, что иерархия заголовков помогает ориентироваться в документе, в том числе пользователям вспомогательных технологий.

Правило выбора: если список разделов позволяет найти ответ быстрее, чем прокрутка, ставьте оглавление после вводного абзаца. Если пунктов получилось слишком много, сначала объедините повторяющиеся разделы. Не превращайте каждую короткую мысль в отдельный пункт только ради длинного списка.

Как подготовить заголовки и адреса разделов

Каждый пункт оглавления должен вести к существующему элементу страницы с уникальным id. Например, ссылка href="#proverka" ведёт к заголовку id="proverka". Это стандартный переход к элементу той же страницы, показанный в справке MDN о ссылках. Адреса лучше задавать короткими латинскими словами, которые не будут меняться при небольшой правке заголовка.

1. Выпишите все основные разделы статьи. Уберите пункты, которые повторяют соседний ответ.
2. Для каждого раздела задайте уникальный id: например, podgotovka, shagi, proverka. Не назначайте один и тот же идентификатор двум заголовкам.
3. Под вводным абзацем создайте список ссылок. Текст ссылки должен совпадать по смыслу с названием раздела, а адрес быть # плюс соответствующий id.
4. Если в статье есть подразделы, вложите их внутрь родительского пункта списка. Не ставьте подраздел на один уровень с основным разделом.
5. Сохраните статью и пройдите по каждому пункту с компьютера и телефона. Затем откройте прямую ссылку на один раздел в новом окне.

Если редактор сайта сам создаёт якоря из заголовков, проверьте фактические адреса после публикации. У разных редакторов они могут формироваться по-разному; вручную придуманный id не поможет, если редактор его не сохранил. Для многостраничного меню действует иная задача, описанная в инструкции по меню сайта.

Минимальный пример без сценария

Для обычного перехода не нужен JavaScript. Разметка ниже показывает оглавление с двумя пунктами и соответствующими заголовками. Элемент <nav> подходит для навигации внутри страницы; MDN отдельно называет оглавление примером такого блока. Если на странице уже есть основное меню, отдельная подпись помогает отличить две навигационные области.

<nav aria-label="Содержание статьи">
  <ol>
    <li><a href="#podgotovka">Подготовка</a></li>
    <li><a href="#proverka">Проверка результата</a></li>
  </ol>
</nav>
<h2 id="podgotovka">Подготовка</h2>
<p>Что потребуется перед началом.</p>
<h2 id="proverka">Проверка результата</h2>
<p>Как убедиться, что всё работает.</p>

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

По теме: Как сделать переходы на сайте: ссылки, якоря и страницы

Что делать с липкой шапкой

При переходе к якорю заголовок может оказаться под фиксированной шапкой. Добавьте отступ прокрутки для заголовков, например scroll-margin-top: 5rem, и подстройте величину под реальную высоту шапки на мобильном и широком экране. [MDN описывает scroll-margin-top](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) как способ оставить место у цели прокрутки при фиксированном заголовке.

Проверяйте не только движение страницы, но и видимость заголовка после перехода. Если он скрыт шапкой, оглавление формально работает, но не помогает читать.

Плавная прокрутка необязательна. Сначала добейтесь правильного перехода по обычной ссылке. Если добавляете анимацию, учитывайте людей, которые предпочитают меньше движения. Общая механика ссылок и якорей разобрана в статье о переходах на сайте.

Как принять результат и исправить ошибки

Проверочный маршрут: откройте статью с самого верха, найдите оглавление, перейдите по первому, среднему и последнему пункту, затем обновите страницу с #id в адресе. Каждый раз должен открываться правильный раздел с видимым заголовком. Пройдите список клавишами Tab и Enter. После изменения названия или порядка разделов повторите этот тест.

• Ссылка не перемещает страницу: проверьте, что href содержит # и точный id существующего элемента.
• Два пункта ведут в одно место: найдите повторяющийся id и назначьте каждому разделу собственный.
• После клика виден текст, но не заголовок: проверьте высоту липкой шапки и отступ прокрутки.
• Оглавление показывает старые разделы: синхронизируйте его с заголовками или включите одно автоматическое оглавление редактора.

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

Частые вопросы

Можно ли сделать содержание без кода?

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

Нужно ли добавлять каждый подзаголовок?

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

Почему ссылка с решёткой не работает?

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