scroll-padding-top
Anchor links that clear a sticky header
Build
Compiles the site and writes it to the output directory.
Deploy
Uploads the result and swaps the alias once it is live.
Rollback
Points the alias back at the previous deployment.
CaveatJump to an anchor under a sticky header and the heading lands behind it. The offset belongs to the scroll container as scroll-padding-top, or to the target as scroll-margin-top, never to both.
FallbackIt applies to every scroll into view, including focus moves and browser find. Nothing to hook up, and no smooth-scroll script to fight with.
/* on the scroller, once */
html { scroll-padding-top: 34px; }
/* or per target, if the header varies */
:target { scroll-margin-top: 34px; }Published