🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Scroll Behavior

Use the scroll-behavior utility class to add smooth scrolling:

Class Description
.scroll-smooth scroll-behavior: smooth;

Apply the .scroll-smooth class to the scrolling element (by default, the <html> element).


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:

Class Description
.scroll-padding-xxxxs scroll-padding: var(--space-xxxxs);
.scroll-padding-xxxs scroll-padding: var(--space-xxxs);
.scroll-padding-xxs scroll-padding: var(--space-xxs);
.scroll-padding-xs scroll-padding: var(--space-xs);
.scroll-padding-sm scroll-padding: var(--space-sm);
.scroll-padding-md scroll-padding: var(--space-md);
.scroll-padding-lg scroll-padding: var(--space-lg);
.scroll-padding-xl scroll-padding: var(--space-xl);
.scroll-padding-xxl scroll-padding: var(--space-xxl);
.scroll-padding-xxxl scroll-padding: var(--space-xxxl);
.scroll-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));

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us