get your scroll on

You know how you sometimes just need a native anchor scroll with a good old /page#section link? You slap a nice scroll-behavior: smooth rule into your CSS, so users would think you’ve spent a while polishing those scroll animations, the browser does all the heavy lifting and the person is gracefully courted to their #section of choice… And then a header covers the top 10% of said section 😑.

Well have I got a solution for you; and basically free! Alright, you smooth talker, we’re good friends by this point, totally free! CSS has a helpful scroll-padding-top property that you can use. Usually you’d apply it to the html element along with the scroll behavior

html {
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

…but there’s nothing stopping you from applying it to a specific element instead/as well. Note that for truly accessible styling (much like padding-block), you can use CSS logical start/end directions instead, for example scroll-padding-block-start.

If you click LINK, you can see that the trivia fact isn’t blocked under the sticky header and nicely in view.