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

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

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

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

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/p>

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

Section to scroll is below:

Here it is #section-6/p>

Smooth scroll - API

Usage

Via data attributes

HTML


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

Via JavaScript

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

JavaScript


        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();`
`getInstance`	Static method which allows you to get the smooth scroll instance associated to a DOM element.	`SmoothScroll.getInstance(smoothScrollEl)`

Events

JavaScript


        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

JavaScript


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