Scroll Behavior
Use the scroll-behavior utility class to add smooth scrolling:
| CSS Class | Description |
|---|---|
s{p}croll-smooth |
scroll-behavior: smooth; |
Apply the .scroll-smooth class to the scrolling element (by default, the <html> element).
Example:
By default, the page will scroll to the target element. To add a gap between the top of the viewport and the element the page scrolls to, use the scroll-padding utility classes.
| CSS Class | Description |
|---|---|
s{p}croll-padding-4xs |
scroll-padding: var(--space-4xs); |
s{p}croll-padding-3xs |
scroll-padding: var(--space-3xs); |
s{p}croll-padding-2xs |
scroll-padding: var(--space-2xs); |
s{p}croll-padding-xs |
scroll-padding: var(--space-xs); |
s{p}croll-padding-sm |
scroll-padding: var(--space-sm); |
s{p}croll-padding-md |
scroll-padding: var(--space-md); |
s{p}croll-padding-lg |
scroll-padding: var(--space-lg); |
s{p}croll-padding-xl |
scroll-padding: var(--space-xl); |
s{p}croll-padding-2xl |
scroll-padding: var(--space-2xl); |
s{p}croll-padding-3xl |
scroll-padding: var(--space-3xl); |
s{p}croll-padding-4xl |
scroll-padding: var(--space-4xl); |
If you need a fixed header in your project, it might be useful to create a custom scroll-padding class:
.scroll-padding-header {
scroll-padding: calc(var(--header-height) + var(--space-sm));
}
