Smooth Scrolling
Replace the default browser behaviour (jump) with a smooth scrolling transition.
Projects /
Projects /
Replace the default browser behaviour (jump) with a smooth scrolling transition.
The smooth scrolling component is used to animate the browser scrolling when a user clicks an element linking to a different section on the same page.
It uses the css scroll-behavior property (applied to the <html> element) to animate the scrolling.
If you want to limit the smooth scrolling behavior to a specific section of your webpage, make sure to set this property for that section only (rather than the <html> element).
For browsers that do not support the scroll-behavior property, a JavaScript fallback is provided.
To set a custom duration for the scrolling, you can edit the data-duration attribute (set in milliseconds) of the .js-smooth-scroll element. This custom duration applies to the JavaScript fallback only.
By default, the window is the element generating the vertical scrollbar. If you have a different scrollable element in your page, you can use the data-scrollable-element-y attribute to pass the CSS selector of the scrollable element.
For example, if you have a <main class="main-el"> with a height: 100vh and overflow: auto, you can set data-scrollable-element-y='.main-el':
<a data-scrollable-element-y=".main-el" class="js-smooth-scroll" href="#targetId">
<!-- ... -->
</a>You can do the same for the horizontal scrolling, using the data-scrollable-element-x attribute.
If your page has a fixed element (e.g., a fixed header), part of your target element may be obscured when the page scrolls to it.
To fix this issue, add a scroll-padding equal to the height of the fixed element to the <html> (or use the scroll-behavior utility classes):
html {
scroll-behavior: smooth;
scroll-padding: 70px; // height of the fixed element
}You can use a CSS variable as well:
html {
scroll-behavior: smooth;
scroll-padding: var(--fixed-header-height);
}To support older browsers (e.g., IE), you can use the data-fixed-element attribute to pass the CSS selector of the fixed element:
<a href="#targetId" class="js-smooth-scroll" data-fixed-element=".js-fixed-header">Link</a>
