How to prevent anchor links from scrolling behind a sticky header

8. September 2020

Update 2022

html {
  scroll-margin-top: 170px; /* fixed header height */

  /* optional improvements */
  overscroll-behavior: none;
  scroll-behavior: smooth;
}

2020

:target::before {
  content: "";
  display: block;
  height: 170px; /* fixed header height */
  margin: -170px 0 0; /* negative fixed header height */
}

by Adrian Garner + Rory O’Kane