Skip to content

Instantly share code, notes, and snippets.

@zachleat
Created August 18, 2020 14:57
Show Gist options
  • Save zachleat/a7393810acf7890e6bef6a34eaa7b78c to your computer and use it in GitHub Desktop.
Save zachleat/a7393810acf7890e6bef6a34eaa7b78c to your computer and use it in GitHub Desktop.
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@zachleat
Copy link
Author

Found via @netlify repo for https://jamstackconf.com/

@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

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