How do I enable smooth scrolling on Squarespace?

CSS smooth scrolling makes anchor link jumps and back-to-top buttons glide instead of snapping. It's a one-line addition to the html element that transforms the scrolling experience site-wide.

The scroll-behavior: smooth property works on all modern browsers. For users who prefer reduced motion (an accessibility setting), use the prefers-reduced-motion media query to disable it.

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Offset for fixed header */
:target {
  scroll-margin-top: 100px;
}