Smooth Scroll Offset Anchor Links with CSS

Don’t you hate it when you create an anchor link and it gets covered up by a fixed header? And isn’t it a bummer when the browser jumps to that link instantaneously all abrupt-like?

Well here’s a quick CSS snippet to create a lightweight, CSS based way to offset anchor links, and have them scroll smoothly:

html {
    scroll-behavior: smooth;
}

:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}

CSS Smooth Scroll

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.

Offset Anchors

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
:target {
  display: block;
  position: relative;
  top: -100px; 
  visibility: hidden;
}

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.