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.
Here it is #section-1
<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.
Here it is #section-2
<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.
Here it is #section-3
<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.
Here it is #section-4
<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
Here it is #section-5
<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.
<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
<a href="#section-1" data-mdb-smooth-scroll="smooth-scroll" data-mdb-container="#container-1">Smooth Scroll</a>
Via JavaScript
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)
|
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. |
const smoothScroll = document.getElementById('smooth-scroll');
smoothScroll.addEventListener('scrollEnd.mdb.smoothScroll', () => {
// do something
});
Import
import { SmoothScroll } from 'mdb-ui-kit';