// Animate scrolling only if users don’t prefer reduced motion @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } // Add some spacing between the target and the top of the viewport :target { scroll-margin-top: 0.8em; } }
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