Отступ для якоря от верхнего края экрана на чистом css

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

Создайте следующую конструкцию и разместите её перед нужным блоком, например перед заголовком <h2>.

<div class="anchor">
    <span id="service"></span>
</div>

После этого добавьте CSS:

/* Отступ для якорей */

.anchor{
    position: relative;
}

.anchor #service{
    position: absolute;
    top: -120px;
}

Что означают параметры

• #service — идентификатор якоря.
• top: -120px; — смещение якоря вверх относительно блока. Именно это значение создаёт отступ от верхнего края экрана.

Преимущества такого способа

• работает с фиксированными шапками;
• можно задавать разные отступы для разных якорей;
• не ломает структуру страницы;
• работает при переходе с других страниц.

Например:

/index.php#service

При переходе браузер корректно прокрутит страницу с учётом заданного отступа.