DEV Community

Discussion on: CSS Smooth Scrolling

Collapse
 
jonaskuske profile image
Jonas • Edited

Add these to your HTML:

<script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script>
<script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>

and add font-family everywhere you set scroll-behavior:

html {
  scroll-behavior: smooth;
  font-family: 'scroll-behavior: smooth' /*, actual fonts */;
}

The first polyfill generally polyfills scroll({ behavior: 'smooth'), the second one (disclosure: written by me) syncs it up with the CSS. 👍🏻


If you don't like the font-family stuff, you can also run your styles through PostCSS with this – or just use an inline style attribute on html:

<html style="scroll-behavior: smooth">

The workaround is not required there. :)

Full docs: jonaskuske.github.io/smoothscroll-...