Якорная ссылка скрывает заголовок под шапкой сайта

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

Начните с наблюдения: меняется ли фрагмент адреса, найден ли нужный элемент и какая область действительно прокручивается. Заголовок может находиться в основном документе или внутри отдельной панели. Исправление одного контейнера не обязано повлиять на другой. Ниже разобран порядок диагностики и учебный браузерный пример; это не универсальная настройка для любой шапки и не аудит доступности всего сайта.

Проверьте, что ссылка ведёт к нужной цели

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

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

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

Измерьте перекрытие, не выбирая число на глаз

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

Затем в том же примере отдельно применили отступ 112 пикселей у цели и, в другом прогоне, у области прокрутки. В обоих случаях верх заголовка оказался на отметке 112, то есть ниже панели. Это результаты шести проверок Chromium на ширинах 390 и 1280 пикселей. Они не устанавливают обязательную высоту шапки и не подтверждают поведение всех браузеров.

Тест выполнен на искусственной странице с одной прокручиваемой областью. Его смысл — показать способ проверки геометрии. В рабочем интерфейсе высота перекрытия может изменяться из-за переноса меню, уведомления или другой компоновки. Значение 112 нельзя просто перенести из этой таблицы в любой проект и объявить исправление завершённым.

Отступ у цели и отступ области относятся к разным местам

Свойство scroll-margin-top задают для элемента, к которому нужно подойти с отступом при соответствующей прокрутке. Такой выбор удобен, когда правило относится к определённым целям. Не путайте его с обычным margin-top: добавление пустоты в раскладку меняет расположение содержимого страницы и решает другую задачу.

Свойство scroll-padding-top относится к области прокрутки. MDN объясняет его как способ определить верхний отступ оптимальной видимой области, в том числе исключить часть, перекрытую закреплённой панелью. Если прокручивается внутренняя панель кабинета, настройку нужно рассматривать для неё, а не автоматически только для корневого документа.

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

Состояния шапки входят в проверку перехода

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

Не выбирайте максимальный отступ бесконечно большим ради всех возможных экранов. Это создаст другой дефект: пользователь перейдёт к пустому участку и не поймёт, где начинается выбранная часть. Разумное решение должно учитывать реальную компоновку и позволять читать контекст заголовка. Точное правило определяет разработчик по реализации шапки и контейнера.

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

Положение страницы и клавиатурный фокус проверяются отдельно

Видимый заголовок ещё не объясняет, где продолжится работа с клавиатурой. Для собственной навигации нужно проверить фокус и последующее перемещение. Не отправляйте его в произвольное поле только ради прокрутки и не делайте все заголовки обычными остановками Tab без понятного назначения. Решение зависит от устройства интерфейса.

W3C в пояснении критерия Focus Not Obscured рассматривает ситуацию, когда элемент с клавиатурным фокусом полностью скрыт содержимым, созданным автором страницы. Закреплённые панели могут создавать такое перекрытие. Это отдельная проверка; один удачный переход к заголовку не подтверждает соответствие сайта всем требованиям WCAG.

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

Не принимайте анимацию за доказательство исправления

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

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

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

Что считать завершённой доработкой

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

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