Smooth scroll

Bootstrap 5 Smooth scroll

Bootstrap smooth scroll is an animated movement from a trigger — such as button, link or any other clickable element — to another place of the same page.

Note: Read the API tab to find all available options and advanced customization

Basic example

Click on the links below to see the live example

To achieve a Smooth Scroll effect, add the data-mdb-smooth-scroll attribute to your link.

Smooth Scroll to #section-1

Here it is #section-1

Edit in sandbox 
        
            
          <a href="#section-1" data-mdb-smooth-scroll="smooth-scroll">Smooth Scroll</a>

Custom container

By adding data-mdb-container attribute you can set container in which you want smooth scroll.

Smooth Scroll to #section-2

Here it is #section-2

Edit in sandbox 
        
            
          <a href="#section-2" data-mdb-smooth-scroll="smooth-scroll" data-mdb-container="#demo-example-2">Smooth Scroll</a>

Custom offset

By adding data-mdb-offset attribute you can set custom offset from element.

Smooth Scroll to #section-3

Here it is #section-3

Edit in sandbox 
        
            
          <a href="#section-3" data-mdb-smooth-scroll="smooth-scroll" data-mdb-offset="25">Smooth Scroll</a>

Custom duration

By adding data-mdb-duration attribute you can set custom duration of smooth scroll.

Smooth Scroll to #section-4

Here it is #section-4

Edit in sandbox 
        
            
          <a href="#section-4" data-mdb-smooth-scroll="smooth-scroll" data-mdb-duration="3000">Smooth Scroll</a>

Custom easing

By adding data-mdb-easing you can set other scroll's motion option

Smooth Scroll to #section-5

Here it is #section-5

Edit in sandbox 
        
            
          <a href="#section-5" data-mdb-smooth-scroll="smooth-scroll" data-mdb-easing="easeInOutQuart">Smooth Scroll</a>

Container away from viewport

When you put container with overflow: scroll away from viewport link firstly will scroll to this container then it will scroll container.

Smooth Scroll to #section-6
Edit in sandbox 
        
            
          <a
            href="#section-6"
            data-mdb-smooth-scroll="smooth-scroll"
            data-mdb-container="#demo-example-6"
            data-mdb-duration="1200"
            data-mdb-easing="easeInQuart"
          >
            Smooth Scroll to #section-6
          </a>

Section to scroll is below:

Here it is #section-6

Smooth scroll - API

Usage

Via data attributes

Edit in sandbox 
        
            
        <a href="#section-1" data-mdb-smooth-scroll="smooth-scroll" data-mdb-container="#container-1">Smooth Scroll</a>

Via JavaScript

Edit in sandbox 
        
            
        const smoothScroll = new mdb.SmoothScroll(document.getElementById('smooth-scroll'), {
          offset: ...,
          easing: ...,
        });

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-container="".

Name Type Default Description
container String 'body' Changes container of scrolling element with overflow: scroll;.
duration Number '500' Changes duration of smooth scroll.
easing String 'linear' Changes motion type of smooth scroll, available easings: 'linear', 'easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInOutQuad' 'easeInOutCubic', 'easeInOutQuart', 'easeInOutQuint', 'easeOutQuad', 'easeOutCubic', 'easeOutQuart', 'easeOutQuint' .
offset Number '0' Changes offset from element

Methods

Name Description Example
cancelScroll Manually cancels smooth scroll smoothScroll.cancelScroll();
dispose Manually disposes an instance smoothScroll.dispose();
getInstance Static method which allows you to get the smooth scroll instance associated to a DOM element. SmoothScroll.getInstance(smoothScrollEl)
getOrCreateInstance Static method which returns the smooth scroll instance associated to a DOM element or create a new one in case it wasn't initialized. SmoothScroll.getOrCreateInstance(smoothScrollEl)
Edit in sandbox 
        
            
        const instance = mdb.SmoothScroll.getInstance(document.getElementById('smooth-scroll'));
        setTimeout(() => {
          instance.cancelScroll();
        }, 100);

Events

Name Description
scrollCancel.mdb.smoothScroll This event fires immediately after canceling smooth scrolling.
scrollEnd.mdb.smoothScroll This event fires immediately when the smooth scroll ends.
scrollStart.mdb.smoothScroll This event fires immediately when the smooth scroll is starting.
Edit in sandbox 
        
            
        const smoothScroll = document.getElementById('smooth-scroll');
        smoothScroll.addEventListener('scrollEnd.mdb.smoothScroll', () => { 
          // do something
        });

Import

Edit in sandbox 
        
            
        import { SmoothScroll } from 'mdb-ui-kit';