# Как быстро решить проблему скрытия якорных ссылок из-за липкой навигации с помощью нескольких строк инлайн‑CSS
Когда в документе (блог/вики/руководство) вы нажимаете ссылку с якорем или пунктом TOC, браузер перемещает элемент с `#some-id` к верхней части окна просмотра. Если вверху закреплена панель навигации `position: sticky` (или `fixed`), то элемент оказывается под ней.
Это обычная фронтенд‑проблема, но для бекенд/полноценных разработчиков она может выглядеть странно: «ссылка работает, но контент скрыт».
В этой статье я покажу самый простой способ – добавить несколько строк инлайн‑CSS на страницу, который сразу решит проблему.
---
## Почему это происходит? {#sec-3d359517ce38}
Браузер делает следующее:
* URL меняется на `.../page#target`
* Находит элемент `id="target`'
* Скроллит так, чтобы начало элемента совпало с верхней частью контейнера прокрутки (обычно viewport).
Но липкая навигация рендерится поверх, поэтому элемент оказывается скрыт.
---
## Самый простой способ: `scroll-margin-top` (отступ для элемента) {#sec-1be8dffe3841}
Если добавить `scroll-margin-top` к элементу, браузер будет пытаться разместить его чуть ниже, чем верхняя часть окна.
### Минимальный инлайн‑CSS (рекомендовано) {#sec-a6247ae187d6}
В `` или шаблоне страницы достаточно добавить:
```html
```
* `--sticky-nav-h` – высота липкой навигации.
* `+ 12px` – небольшая свобода, чтобы элемент не прилипал к ней.
> Применяя к `[id]` глобально, вы автоматически исправляете все якорные переходы на странице. Если это слишком обширно, ограничьте область.
### Ограничение области для большей безопасности {#sec-a361296aa6ac}
Например, только в области статьи:
```html
```
Или только к заголовкам, которые обычно используются в TOC:
```html
```
---
## Дополнительный вариант: `scroll-padding-top` (паддинг контейнера) {#sec-649a0cca0b38}
`scroll-padding-top` задаёт «безопасную» область для контейнера прокрутки. В большинстве случаев `scroll-margin-top` проще, но иногда комбинация повышает надёжность.
```html
```
* Полезно, если нужно быстро поправить все якорные переходы на уровне страницы.
* Для точного контроля лучше использовать `scroll-margin-top`.
---
## Классический трюк для совместимости: `::before` с фальшивым отступом {#sec-70f2c4a21286}
Старая техника: добавляем невидимый блок перед целевым элементом.
```html
```
Пример использования:
```html
Установка
```
* Плюс: работает даже в старых браузерах.
* Минус: нужно добавлять класс и чуть больше кода.
Современный подход – сначала попробовать `scroll-margin-top`, а при необходимости – применить `::before`.
---
## JavaScript‑вариант: почему инлайн‑CSS лучше {#sec-7bd39bacd041}
Можно вызвать `scrollIntoView()` и затем сместить окно: `window.scrollBy(0, -navHeight)`. Но CSS‑решение предпочтительнее:
* Статические страницы с большим количеством ссылок.
* Быстрое исправление без изменения роутера.
* Когда поддержка не требует глубоких знаний JavaScript.
Инлайн‑`
```
Это обычно решает TOC, сноски и глубокие ссылки. Надеюсь, статья поможет разработчикам, которые сталкиваются с проблемой скрытия ссылок под липкой навигацией.
---
**Похожие статьи**
- [Почему важно указывать width и height в теге img](/ko/whitedec/2025/12/24/why-specified-width-height-in-img-tag/)
- [Минимум, который должен знать бекенд‑инженер: лучшие 5 методов и модулей JS](/ko/whitedec/2025/11/23/backend-engineer-minimum-frontend-js-methods-modules-best-5/)