utilities
CSS Smooth Scroll
Enable smooth scrolling for anchor links site-wide and for individual containers with scroll-behavior.
Smooth scrolling makes anchor navigation feel polished and intentional. The scroll-behavior: smooth property handles this entirely in CSS with no JavaScript. You can apply it globally via :root or scope it to specific containers. Always include a prefers-reduced-motion override.
Usage Note
scroll-padding-top is critical when you have a sticky header — without it, the target of an anchor link will scroll under the header. Set scroll-padding-top to match your navbar height.
Tags
#smooth-scroll#scroll-behavior#anchor#navigation#accessibility