scroll-margin-top, czyli jak poradzić sobie z przewijaniem do kotwic, kiedy nawigacja jest sticky

redakcja | 25.03.2021 14:07
Programiści analizują kod
Programiści analizują kod | envato, seventyfourimages

scroll-margin-top pozwala dodać nam po przewijaniu do elementu kotwicy górny margines nad linkowanym elementem. 

Za pomocą scroll-margin-top rozwiążesz problem ucinanych nagłówków lub zdań, gdy masz na stronie wdrożone sticky top menu lub tak dobrze działający pod SEO spis tematów w artykule.  Bez tego parametru trzeba przewijać stronę za pomocą JavaScript. 

Pomysłowym rozwiązaniem jest dodanie do wszystkich elementów posiadających id margines po przewijani. Dlaczego do id, bo kotwica linkowana jest do nazwy id elementu. 

[id]: { scroll-margin-top: 20px,}

Właściwość scroll-margin jest częścią CSS Scroll Snap Module.

Artykuły z portalu