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
Smooth Scroll

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

Smooth Scroll

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

Smooth Scroll

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

Smooth Scroll

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>

Smooth Scroll

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
Smooth Scroll to #section-6

Section to scroll is below:

Here it is #section-6/p>

Title - API

Usage

Via data attributes

Smooth Scroll

Via JavaScript

var 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

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

Events

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