Задача: имеется ссылка внутреннего перехода в виде <a href=”#header3″> Заголовок 3</a>, которая ссылается на что то вроде <h3 id=”header3″> Заголовок 3 </h3>. Все выглядит прекрасно, пока не появляется position:fixed; заголовок вверху страницы, скрывающий заголовок, на который вы пытаетесь сослаться!

Фиксированные заголовки, как правило, скрывают элемент на который они ссылаются.

Раньше для решения этой задачи использовались всевозможные хаки. Либо данная особенность игнорировалась, так как пользователю более важен контент на который переходит ссылка, чем заголовок этого контента, но некоторым (Привет, дизайнеры перфекционисты!) это резало глаз.

Для решения этой задачи, на данный момент, с помощью CSS можно сделать следующее:

h3 {  scroll-margin-top: 5rem; }

Вот так это выглядит на сайте и реализуется в коде:

dark