Scroll Behavior - v3
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 set a scroll padding (i.e., 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-xxxxs |
scroll-padding: var(--space-xxxxs); |
s{p}croll-padding-xxxs |
scroll-padding: var(--space-xxxs); |
s{p}croll-padding-xxs |
scroll-padding: var(--space-xxs); |
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-xxl |
scroll-padding: var(--space-xxl); |
s{p}croll-padding-xxxl |
scroll-padding: var(--space-xxxl); |
s{p}croll-padding-xxxxl |
scroll-padding: var(--space-xxxxl); |
If you have a fixed header in your project, it may be handy to create a custom scroll-padding class in your custom-style/_util.scss file:
.scroll-padding-header {
scroll-padding: calc(var(--header-height) + var(--space-sm));
}
