CSS scroll-padding-top
The scroll-padding-top property reserves space at the top of a scroll container when the browser scrolls to a target. It is especially useful with sticky or fixed headers.
Syntax
scroll-padding-top: 0;
scroll-padding-top: 5rem;Example
html {
scroll-padding-top: 5rem;
}With this rule, anchor links are less likely to land hidden behind a fixed header.
When it helps
This property is one of the cleanest fixes for headings hidden behind sticky headers after clicking an anchor link. It changes the scroll target position without adding fake empty elements above every section.
Use a value that matches the real header height plus a little breathing room.
Common mistake
Use scroll-padding-top on the scroll container. For normal page scrolling, that is often html. For an internal panel, apply it to the panel itself.