Vue Smooth scroll

Vue 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 v-mdb-smooth-scroll directive to your link.

Smooth Scroll to #section-1

Here it is #section-1


Custom container

By adding container argument you can set container in which you want smooth scroll.

Smooth Scroll to #section-2

Here it is #section-2


Custom offset

By adding offset argument you can set custom offset from element.

Smooth Scroll to #section-3

Here it is #section-3


Custom duration

By adding duration argument you can set custom duration of smooth scroll.

Smooth Scroll to #section-4

Here it is #section-4


Custom easing

By adding 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>

Vue Smooth scroll - API


Import


        import { mdbSmoothScroll } from "mdb-vue-ui-kit";
      

Arguments

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