📜 Instant Jump is Jarring. Smooth is Better.
Anchor links jump instantly. scroll-behavior: smooth animates scrolling. Better UX, no JavaScript.
📝 Basic Usage
/* Apply to entire page */
html {
scroll-behavior: smooth;
}
/* Apply only to specific container */
.scroll-container {
scroll-behavior: smooth;
overflow-y: auto;
height: 400px;
}
/* HTML structure */
<a href="#section1">Go to Section 1</a>
<div id="section1">Content here</div>
🎯 Advanced
/* Scroll padding (for fixed headers) */
html {
scroll-behavior: smooth;
scroll-padding-top: 70px; /* Account for fixed header */
}
/* Back to top button */
.scroll-top {
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
}
/* Scroll margin (offset target) */
.target-element {
scroll-margin-top: 80px;
}
/* Prefers reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
💡 Browser Support
- Chrome 61+ ✅
- Firefox 36+ ✅
- Safari 15.4+ ✅
- Edge 79+ ✅
- Fallback: instant jump for older browsers
“Added scroll-behavior: smooth. Table of contents clicks now animate smoothly. No JavaScript. Users love it. One line of CSS, huge UX improvement.”