CSS scroll-margin — якір не ховається під липкою шапкою

CSS властивість scroll-margin додає відступ навколо елемента при прокручуванні до нього — за якорем або через scrollIntoView().

правити

Загальний опис

Класична біда сайтів із липкою шапкою: клікаєш на якір — і заголовок опиняється під шапкою, бо браузер прокрутив рівно до його верху.

scroll-margin-top: 80px каже: «зупинись на 80 пікселів раніше». Заголовок стає видимим, шапка нічого не перекриває.

правити

Порада

Задай scroll-margin-top усім заголовкам, до яких ведуть якорі — це висота твоєї липкої шапки плюс невеликий запас.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

scroll-margin: <length>{1,4};

Властивість scroll-margin може отримувати єдине значення:

length

Відступ від краю області прокрутки (1–4 значення, як у margin).

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
scroll-margin	69+	68+	14.1+	56+	79+	-

Підтримка: мобільні переглядачі

Переглядач
scroll-margin	69+	yes	yes	14.5+

Приклади

+ запропонувати свій приклад у пісочниці

<header class="sticky">Липка шапка</header>
<a href="#target">До розділу</a>
<div style="height: 120vh"></div>
<h2 id="target">Розділ</h2>

.sticky {
    position: sticky;
    top: 0;
    height: 60px;
    background: #0172ad;
    color: #fff;
}

/* зупинитись на 80px раніше — шапка не перекриє */
h2 {
    scroll-margin-top: 80px;
}