Go to homepage

Projects /

Smooth Scrolling

Replace the default browser behaviour (jump) with a smooth scrolling transition.

View Demo

How to

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.

Scrollable Element #

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">
  <!-- ... -->

You can do the same for the horizontal scrolling, using the data-scrollable-element-x attribute.

Fixed Header #

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>


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

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