Итак, проблема - на html-странице есть ссылка на якорь, подобная этой: <a href="#header-3">Перейти</a>, при нажатии на которую происходит переход к такому блоку <h3 id="header-3">Заголовок</h3>. На первый взгляд, все работает превосходно, но не в случае, когда к шапке сайта применили CSS-свойство position: fixed; - header просто не позволит увидеть блок, к которому Вы перешли.

Да, это особенность фиксированной “шапки”: она скрывает элемент-якорь, к которому Вы переходите.

Существует множество хаков, решающих данную проблему. Есть и альтернативный подход: “Для заголовка-якоря можно создать большой padding-top, и проблема будет решена. Если, конечно, размеры отступов никого не беспокоят.”

Но, оказывается, теперь есть отличный простой способ решения такой проблемы:

h3 {
  scroll-margin-top: 5rem; /* нужно задать величину, соответствующему Вашим требованиям */
}

Это очень практичное решение. Вот простой пример на codepen:

Данное свойство поддерживается последними версиями наиболее популярных браузеров, кроме Internet Explorer и Edge. В любом случае не забывайте проверять возможность использования CSS-свойств в различных браузерах, например, с помощью ресурса caniuse.

Спасибо за внимание

Перевод статьи Chris Coyier “Перевод статьи Chris Coyier ””“.