От автора: Проблема: вы нажимаете ссылку перехода, например, <a href=»#header-3″>Jump</a> — это ссылка на что-то наподобие <h3 id=»header-3″>Header</h3>. Это совершенно нормально, пока в верхней части страницы не появится заголовок с position: fixed;, скрывающий заголовок, на который вы пытаетесь перейти!
Фиксированные заголовки имеют неприятную привычку скрывать элемент, на который вы размещаете ссылку.
Раньше для решения этой проблемы использовались всевозможные хаки. На самом деле, при разработке CSS-Tricks, я говорил: «Черт возьми, я просто буду задавать с запасом padding-top для заголовков в статье, потому что я все равно не возражаю против такого вида».
Но на самом деле сейчас есть действительно простой способ справиться с этим в CSS – с помощью scroll-margin-top.
h3 { scroll-margin-top: 5rem; /* здесь любое число, которое даст вам отступ от фиксированного заголовка */
}
У нас есть статья на альманахе, в которой описана поддержка браузерами – это практически все браузеры. Об этом часто говорят в связи с привязкой прокрутки, но я считаю этот вариант использования еще более практичным. Вот простая демонстрация:
В том же духе работает и эта странная (но крутая) ссылка на «текстовые фрагменты», которую предоставил Chrome для перехода к середине страницы.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.
