Motion
scroll-behavior
Choose immediate or smooth navigation within a scroll container.
Overview
| Class | Declarations |
|---|---|
scroll-behavior:auto | scroll-behavior: auto;
|
scroll-behavior:smooth | scroll-behavior: smooth;
|
scroll-behavior:<value> | scroll-behavior: <value>;
|
Examples
Enable smooth anchor scrolling
scroll-behavior:smooth lets the browser animate anchor navigation and scroll API calls that use automatic behavior. It does not set the speed of a wheel or touch gesture. Follow the links to move between real destinations in this bounded scroller.
Enable smooth anchor scrolling
Choose a destination to trigger native navigation. Smooth timing belongs to the browser; reduced motion keeps navigation immediate.
<nav aria-label="Collection sections"> <a href="#overview">Overview</a> <a href="#details">Details</a> <a href="#resources">Resources</a></nav><div id="scrollport" class="overflow-y:auto h:14rem scroll-behavior:smooth scroll-behavior:auto@reduce-motion" tabindex="0" aria-label="Scrollable collection"> <section id="overview" class="h-3xs"> <strong>Overview</strong> <p>Collect the decisions and shared assets for this project in one place.</p> </section> <section id="details" class="h-3xs"> <strong>Details</strong> <p>Review the structure, spacing and behavior before preparing the final handoff.</p> </section> <section id="resources" class="h-3xs"> <strong>Resources</strong> <p>Keep source files and supporting notes beside the finished collection.</p> </section></div>Generated CSS
@layer utilities { .scroll-behavior\:smooth { scroll-behavior: smooth }}The browser chooses the timing and may ignore smooth scrolling. The @reduce-motion override uses the user’s actual system preference.
Use immediate scrolling
scroll-behavior:auto uses the browser’s ordinary immediate scrolling behavior. Activate Details to compare the direct jump with the animated example above.
Use immediate scrolling
Choose a destination to make an immediate native jump.
<nav aria-label="Collection sections"> <a href="#overview">Overview</a> <a href="#details">Details</a> <a href="#resources">Resources</a></nav><div id="scrollport" class="overflow-y:auto h:14rem scroll-behavior:auto" tabindex="0" aria-label="Scrollable collection"> <section id="overview" class="h-3xs"> <strong>Overview</strong> <p>Collect the decisions and shared assets for this project in one place.</p> </section> <section id="details" class="h-3xs"> <strong>Details</strong> <p>Review the structure, spacing and behavior before preparing the final handoff.</p> </section> <section id="resources" class="h-3xs"> <strong>Resources</strong> <p>Keep source files and supporting notes beside the finished collection.</p> </section></div>Generated CSS
@layer utilities { .scroll-behavior\:auto { scroll-behavior: auto }}Combine with scroll offsets
Use scroll padding on the container to reserve its viewing region, and scroll margin on a target for extra clearance. Details stops 64px below the top: 48px for the sticky header plus 16px of target clearance.
Combine with scroll offsets
Choose a destination to trigger native navigation. Smooth timing belongs to the browser; reduced motion keeps navigation immediate.
<nav aria-label="Collection sections"> <a href="#overview">Overview</a> <a href="#details">Details</a> <a href="#resources">Resources</a></nav><div id="scrollport" class="overflow-y:auto h:14rem scroll-pt-2xl scroll-behavior:smooth scroll-behavior:auto@reduce-motion" tabindex="0" aria-label="Scrollable collection"> <header class="sticky top z:1 h:3rem">Collection navigation</header> <section id="overview" class="h-3xs"> <strong>Overview</strong> <p>Collect the decisions and shared assets for this project in one place.</p> </section> <section id="details" class="h-3xs scroll-mt-md"> <strong>Details</strong> <p>Review the structure, spacing and behavior before preparing the final handoff.</p> </section> <section id="resources" class="h-3xs"> <strong>Resources</strong> <p>Keep source files and supporting notes beside the finished collection.</p> </section></div>Apply conditionally
Use selectors and conditional queries to apply the change only when its condition matches. This scroller moves immediately at narrow widths. From sm, it animates only when the user has not requested reduced motion.
Apply conditionally
Choose a destination to trigger native navigation. Smooth timing belongs to the browser; reduced motion keeps navigation immediate.
<nav aria-label="Collection sections"> <a href="#overview">Overview</a> <a href="#details">Details</a> <a href="#resources">Resources</a></nav><div id="scrollport" class="overflow-y:auto h:14rem scroll-behavior:auto scroll-behavior:smooth@motion@sm" tabindex="0" aria-label="Scrollable collection"> <section id="overview" class="h-3xs"> <strong>Overview</strong> <p>Collect the decisions and shared assets for this project in one place.</p> </section> <section id="details" class="h-3xs"> <strong>Details</strong> <p>Review the structure, spacing and behavior before preparing the final handoff.</p> </section> <section id="resources" class="h-3xs"> <strong>Resources</strong> <p>Keep source files and supporting notes beside the finished collection.</p> </section></div>