Как создать якорные ссылки в Elementor без перекрытия хедером

Почему якорная навигация работает неправильно

Якорная ссылка содержит фрагмент URL, например #pricing. Браузер находит на странице элемент с соответствующим атрибутом id и прокручивает его к верхнему краю окна браузера.

Если над контентом расположен фиксированный хедер высотой 80–100 пикселей, он остается поверх страницы и перекрывает целевой элемент. Сам механизм якорной навигации при этом работает правильно: браузер не знает, что часть верхней области занята хедером.

Важно различать CSS-класс и HTML-идентификатор. Ссылка в формате #pricing ищет именно id="pricing", а не class="pricing". Поэтому для надежной работы в Elementor нужно указать CSS ID целевого контейнера или секции. CSS-класс можно добавить дополнительно, но он не заменяет идентификатор.

• Ссылка: #pricing
• Целевой элемент: id="pricing"
• Отступ от хедера: scroll-margin-top

Как настроить целевую секцию в Elementor

Сначала откройте страницу в редакторе Elementor и выберите контейнер или секцию, на которую должна вести якорная ссылка. Именно этому элементу нужно назначить CSS ID.

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

Не добавляйте пробелы, решетку или ненужные специальные символы. Лучше использовать короткие названия латиницей: services, contacts, faq или pricing. Идентификатор должен быть уникальным на странице.

• Выберите целевой контейнер или секцию.
• В поле CSS ID введите, например, pricing.
• В ссылке кнопки или меню укажите #pricing.
• Убедитесь, что на странице нет другого элемента с таким же ID.

CSS-решение с помощью scroll-margin-top

Свойство scroll-margin-top создает невидимый запас над элементом при прокрутке к нему. Оно не добавляет пустое пространство в макет и не изменяет фактическую высоту секции.

Если CSS ID целевого элемента — pricing, правило можно применить непосредственно к нему. Значение 90px замените на приблизительную высоту вашего хедера.

• Для хедера высотой около 80px можно начать со значения 90px.
• Если высота хедера меняется во время прокрутки, ориентируйтесь на максимальное значение, которое может перекрывать контент.
• Для мобильной версии задайте отдельный отступ, если высота хедера изменяется.

#pricing {
  scroll-margin-top: 90px;
}

@media (max-width: 767px) {
  #pricing {
    scroll-margin-top: 70px;
  }
}

Если нужно использовать CSS-класс

Иногда удобнее назначить одно и то же правило нескольким секциям. В этом случае добавьте к ним класс anchor-target, а CSS ID оставьте для конкретных якорных ссылок. Это позволяет централизованно управлять отступом для всех целевых блоков.

• В поле CSS Classes добавьте anchor-target.
• В поле CSS ID используйте уникальное значение, например pricing.
• Ссылку направляйте на #pricing, а не просто на имя класса.

.anchor-target {
  scroll-margin-top: 90px;
}

@media (max-width: 767px) {
  .anchor-target {
    scroll-margin-top: 70px;
  }
}

Куда добавить CSS в Elementor или WordPress

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

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

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

• Локальное правило подходит для одного или нескольких блоков на конкретной странице.
• Глобальное правило для класса удобно использовать в повторяющихся секциях.
• После изменений проверьте страницу в режиме инкогнито или после очистки кеша.

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

Значение scroll-margin-top должно быть не условным, а достаточным для полного освобождения заголовка и начала контента из-под хедера. Измерьте фактическую высоту верхней панели в обычном состоянии и во время прокрутки.

Если высота хедера составляет 72px, значение 80–90px обычно оставляет небольшой запас. Если хедер содержит два ряда, промо-полосу или изменяется после прокрутки, проверяйте именно то состояние, в котором заметно перекрытие.

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

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

Проверка и типичные ошибки

После настройки откройте страницу в обычном режиме и нажмите каждую якорную ссылку. Целевой заголовок должен быть полностью виден под хедером, а URL должен содержать соответствующий фрагмент, например #pricing.

Если прокрутка не работает, сначала проверьте соответствие CSS ID и ссылки. Значения pricing и #pricing связаны между собой, но ID не должен содержать повторяющихся символов или пробелов.

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

• Использование class вместо id в качестве единственной точки привязки.
• Добавление # в поле CSS ID Elementor.
• Одинаковый ID у нескольких секций.
• Применение scroll-margin-top к хедеру, а не к целевому элементу.
• Проверка только в редакторе без тестирования опубликованной страницы.
• Старый CSS из-за кеша браузера, плагина или CDN.

Альтернатива: scroll-padding-top для всей страницы

Если нужно исправить все якорные переходы на сайте, можно задать верхний внутренний отступ для области прокрутки с помощью scroll-padding-top. Это глобальный подход: он будет влиять на все фрагментные ссылки, а не только на отдельные секции.

Для страницы с разными хедерами или разными сценариями навигации безопаснее использовать scroll-margin-top для конкретных целей. Глобальное правило стоит применять, когда фиксированный хедер имеет стабильную высоту на всей странице.

• scroll-margin-top — точечное решение для отдельных целевых блоков.
• scroll-padding-top — глобальное решение для всех якорных переходов.
• Если высота хедера различается на разных устройствах, используйте медиазапросы.

html {
  scroll-padding-top: 90px;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 70px;
  }
}