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

        
            
            <template>
              <a href="#section-1" v-mdb-smooth-scroll>Smooth Scroll to #section-1</a>
            </template>
          
        
    
        
            
            <script>
              import { mdbSmoothScroll } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbSmoothScroll
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbSmoothScroll as vMdbSmoothScroll } from 'mdb-vue-ui-kit';
            </script>

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

        
            
            <template>
              <div
                id="example-2"
                style="overflow-y: auto; height: 100px; width: 100%; text-align: center"
              >
                <a
                  href="#section-2"
                  v-mdb-smooth-scroll="{ container: '#example-2' }"
                >
                  Smooth Scroll to #section-2
                </a>
                <div style="height: 100px"></div>
                <section id="section-2" class="mt-5 text-center">
                  <p>Here it is #section-2</p>
                </section>
                <div style="height: 500px"></div>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { mdbSmoothScroll } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbSmoothScroll
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbSmoothScroll as vMdbSmoothScroll } from 'mdb-vue-ui-kit';
            </script>

Custom offset

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

Smooth Scroll to #section-3

Here it is #section-3

        
            
            <template>
              <div
                id="example-3"
                style="overflow-y: auto; height: 100px; width: 100%; text-align: center"
              >
                <a
                  href="#section-3"
                  v-mdb-smooth-scroll="{ container: '#example-3', offset: 25 }"
                  >Smooth Scroll to #section-3</a
                >
                <div style="height: 100px"></div>
                <section id="section-3" class="mt-4 text-center">
                  <p>Here it is #section-3</p>
                </section>
                <div style="height: 500px"></div>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { mdbSmoothScroll } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbSmoothScroll
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbSmoothScroll as vMdbSmoothScroll } from 'mdb-vue-ui-kit';
            </script>

Custom duration

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

Smooth Scroll to #section-4

Here it is #section-4

        
            
            <template>
              <div
                id="example-4"
                style="overflow-y: auto; height: 100px; width: 100%; text-align: center"
              >
                <a
                  href="#section-4"
                  v-mdb-smooth-scroll="{
                    container: '#example-4',
                    duration: 3000
                  }"
                >
                  Smooth Scroll to #section-4
                </a>
                <div style="height: 100px"></div>
                <section id="section-4" class="mt-4 text-center">
                  <p>Here it is #section-4</p>
                </section>
                <div style="height: 500px"></div>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { mdbSmoothScroll } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbSmoothScroll
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbSmoothScroll as vMdbSmoothScroll } from 'mdb-vue-ui-kit';
            </script>

Custom easing

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

Smooth Scroll to #section-5

Here it is #section-5/p>

        
            
            <template>
              <div
                id="example-5"
                style="overflow-y: auto; height: 100px; width: 100%; text-align: center"
              >
                <a
                  href="#section-5"
                  v-mdb-smooth-scroll="{
                    container: '#example-5',
                    duration: 1000,
                    easing: 'easeInOutQuart'
                  }"
                >
                  Smooth Scroll to #section-5
                </a>
                <div style="height: 100px"></div>
                <section id="section-5" class="mt-4 text-center">
                  <p>Here it is #section-5</p>
                </section>
                <div style="height: 500px"></div>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { mdbSmoothScroll } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbSmoothScroll
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbSmoothScroll as vMdbSmoothScroll } from 'mdb-vue-ui-kit';
            </script>

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 
        
            
            <template>
              <a
                href="#section-6"
                v-mdb-smooth-scroll="{
                  container: '#example-6',
                  duration: 1200,
                  easing: 'easeInQuart'
                }"
              >
                Smooth Scroll to #section
              </a>
            </template>
          
        
    
        
            
            <script>
              import { mdbSmoothScroll } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbSmoothScroll
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbSmoothScroll as vMdbSmoothScroll } from 'mdb-vue-ui-kit';
            </script>

Section to scroll is below:

Here it is #section-6

Smooth scroll - API

Import

        
            
          <script>
            import {
              mdbSmoothScroll
            } from 'mdb-vue-ui-kit';
          </script>

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