Smooth scroll MDB Pro component

Smooth scroll - Bootstrap 5 & Material Design 2.0

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-smooth-scroll attribute to your link.

Smooth Scroll to #section-1

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

Here it is #section-1


Custom container

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

Smooth Scroll to #section-2

Here it is #section-2


          <a href="#section-2" data-smooth-scroll="smooth-scroll" data-container="#example-2"
            >Smooth Scroll</a
          >
        

Custom offset

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

Smooth Scroll to #section-3

Here it is #section-3


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

Custom duration

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

Smooth Scroll to #section-4

Here it is #section-4


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

Custom easing

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

Smooth Scroll to #section-5

Here it is #section-5/p>


          <a href="#section-5" data-smooth-scroll="smooth-scroll" data-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

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

Section to scroll is below:

Here it is #section-6/p>

Smooth scroll - API


Usage

Via data attributes


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

Via JavaScript


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

Options

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


        const instance = mdb.SmoothScroll.getInstance(document.getElementById('smooth-scroll'));
        setTimeout(() => { 
          instance.cancelScroll(); 
        }, 100);
      
Name Description Example
cancelScroll Manually cancels smooth scroll smoothScroll.cancelScroll();
dispose Manually disposes an instance smoothScroll.dispose();

Events


        const smoothScroll = document.getElementById('smooth-scroll');
        smoothScroll.addEventListener('scrollEnd.mdb.smoothScroll', () => {
          // do something 
        });
      
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.

Import


        import { SmoothScroll } from 'mdb-ui-kit';