Go to homepage

Projects /

Smooth Scrolling

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

View Demo

Dependencies

Compatible CSS frameworks:

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

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>

Categories

Bug report & feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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