От создателя: Неувязка: вы нажимаете ссылку перехода, к примеру, Jump — это ссылка на что-то наподобие
Header
. Это совсем нормально, пока в высшей части странички не покажется заголовок с position: fixed;, скрывающий заголовок, на который вы пытаетесь перейти!
Фиксированные заголовки имеют неприятную привычку скрывать элемент, на который вы располагаете ссылку.
Ранее для решения данной для нас трудности использовались различные хаки. По сути, при разработке CSS-Tricks, я гласил: «Черт возьми, я просто буду задавать с припасом padding-top для заголовков в статье, поэтому что я все равно не возражаю против такового вида».
Но по сути на данный момент есть вправду обычный метод совладать с сиим в CSS – при помощи scroll-margin-top.
CSS h3 { scroll-margin-top: 5rem; /* тут хоть какое число, которое даст для вас отступ от фиксированного заголовка */
}
| 123 | h3 { scroll-margin-top: 5rem; /* тут хоть какое число, которое даст для вас отступ от фиксированного заголовка */} |
У нас есть статья на альманахе, в которой описана поддержка браузерами – это фактически все браузеры. О этом нередко молвят в связи с привязкой прокрутки, но я считаю этот вариант использования еще наиболее удобным. Вот обычная демонстрация:
В том же духе работает и эта странноватая (но крутая) ссылка на «текстовые фрагменты», которую предоставил Chrome для перехода к середине странички.
Создатель: Chris Coyier
Редакция: Команда webformyself.
Источник
Сontent-visibility и доступная семантика