Scroll Behavior & Snap
What is Scroll Behavior?
Imagine clicking a "Table of Contents" link at the top of a long document. By default, the page instantly jumps to the clicked section in a blink of an eye. This is functional, but it can be disorienting because the user loses their place in the document. Now imagine the page smoothly sliding/scrolling down to the target section over a second.In CSS, the scroll-behavior property controls the scrolling transition profile for a window viewport:
scroll-behavior: smooth; — Animates scroll transitions smoothly when clicking anchor links.Why does it matter?
Smooth scrolling adds premium navigation aesthetics and aids readability. It helps users understand where they are on the page as it slides, improving overall usability.Syntax Breakdown
Set the scroll behavior on the roothtml selector:
html {
scroll-behavior: smooth;
}
Common Mistakes
scroll-behavior: smooth; on the body tag will not activate smooth scrolling for anchor link jumps. Always set it on the root html selector to ensure cross-browser compatibility!Quick Reference
scroll-behavior — Scroll transition animator.smooth — Keyword to slide viewport transitions smoothly.html — The target root tag for page-level scroll behavior settings.Your Task
Add a declaration inside the `html` selector to set `scroll-behavior` to `smooth`.
index.html
Type code above to start the lesson.
Live Preview