The scroll-behavior is a CSS property that’s got some – but not full – browser support so you mileage will vary. My browser of choice, Safari, does not currently support this property, but I’ve implemented it on this site anyway. You can add it to an individual element, or enable site wide on html.
There are quite a few offset anchor tutorials out there, but most target the :target (heh heh heh) pseudo-class directly, hiding and moving it around. The only way this really works is to set the anchor on an additional element so you don’t lose the actual anchor you want to skip to. Something like this:
// Do not use this
The key here is the additional :before pseudo element. This allows you to keep the markup clean while still offsetting, and not have the target disappear.
Offset Smooth Anchor Demo
Click this link right here and you should be smoothly whisked to a section above. Unless you’re on Safari. So abrupt!
Bonus points to those who try it and can leave a comment about which section it links to.