Skip to content

Instantly share code, notes, and snippets.

@zachleat

zachleat/smoothscroll.css

Created August 18, 2020 14:57
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save zachleat/a7393810acf7890e6bef6a34eaa7b78c to your computer and use it in GitHub Desktop.
Save zachleat/a7393810acf7890e6bef6a34eaa7b78c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
smoothscroll.css
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@adamculpepper
Copy link

Thanks for sharing @zachleat!
I made a quick example of this because I was in disbelief that "smooth scrolling" could be done in pure css.
demo: https://jsfiddle.net/adamculpepper/onu57cpj/5

@zachleat
Copy link
Author

zachleat commented Aug 21, 2020 •
edited

Per some of the comments on the Tweet https://twitter.com/zachleat/status/1295737380738146304 I’ve switched to using:

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

via https://twitter.com/g16n/status/1296799212445880321 and https://twitter.com/ericwbailey/status/1295741897483464705

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment