/** * Enable smooth scrolling on the whole document */ html { scroll-behavior: smooth; } /** Animations can cause issues for users who suffer from motion sickness and other conditions. * Disable smooth scrolling when users have prefers-reduced-motion enabled */ @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter