Smooth scroll

Bootstrap 5 Smooth scroll

Bootstrap smooth scroll refers to an animated transition from a trigger, such as a button, link, or any other clickable element, to another location on the same page.

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

Required ES init: SmoothScroll *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Click on the links below to see the live example.

To achieve a Smooth Scroll effect, add the data-mdb-smooth-scroll-init 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-init>Smooth Scroll</a>
            
        
    
        
            
              // Initialization for ES Users
              import { SmoothScroll, initMDB } from "mdb-ui-kit";
              
              initMDB({ SmoothScroll });

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-init data-mdb-container="#demo-example-2">Smooth Scroll</a>
            
        
    
        
            
              // Initialization for ES Users
              import { SmoothScroll, initMDB } from "mdb-ui-kit";
              
              initMDB({ SmoothScroll });

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-init data-mdb-offset="25">Smooth Scroll</a>
            
        
    
        
            
              // Initialization for ES Users
              import { SmoothScroll, initMDB } from "mdb-ui-kit";
              
              initMDB({ SmoothScroll });

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-init data-mdb-duration="3000">Smooth Scroll</a>
            
        
    
        
            
              // Initialization for ES Users
              import { SmoothScroll, initMDB } from "mdb-ui-kit";
              
              initMDB({ SmoothScroll });

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-init data-mdb-easing="easeInOutQuart">Smooth Scroll</a>
            
        
    
        
            
              // Initialization for ES Users
              import { SmoothScroll, initMDB } from "mdb-ui-kit";
              
              initMDB({ SmoothScroll });

Container away from viewport

When a container with overflow: scroll is positioned away from the viewport, a link will initially scroll to this container before scrolling within the container."

Smooth Scroll to #section-6
Edit in sandbox 
        
            
              <a
                href="#section-6"
                data-mdb-smooth-scroll-init
                data-mdb-container="#demo-example-6"
                data-mdb-duration="1200"
                data-mdb-easing="easeInQuart"
              >
                Smooth Scroll to #section-6
              </a>
            
        
    
        
            
              // Initialization for ES Users
              import { SmoothScroll, initMDB } from "mdb-ui-kit";
              
              initMDB({ SmoothScroll });

Section to scroll is below:

Here it is #section-6

Smooth scroll - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
        
            
            import { SmoothScroll, initMDB } from "mdb-ui-kit";
            initMDB({ SmoothScroll });
          
        
    
        
            
            import 'mdb-ui-kit';

Usage

Via data attributes

Using the Smooth scroll method doesn't require any additional JavaScript code - simply add data-mdb-smooth-scroll-init attribute to a tag and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

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

Via JavaScript

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

Options

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

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 myScroll = document.getElementById('myScroll');
            const instance = SmoothScroll.getInstance(myScroll);
            setTimeout(() => {
              instance.cancelScroll();
            }, 100);
          
        
    
        
            
          const myScroll = document.getElementById('myScroll');
          const instance = mdb.SmoothScroll.getInstance(myScroll);
          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
        });