Smooth Scroll MDB Pro component

Vue Smooth Scroll - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Vue Bootstrap smooth scroll is an animated movement from a trigger - button, link or any other clickable element - to another place of the same page.

Bootstrap SmoothScroll

Click on the links below to see the live example

Click to scroll to section 1
Click to scroll to section 2

To achieve Smooth Scroll effect the directive must first be imported and declared as such in on the Vue instance. For Vue to be able to distinguish it as a directive (as opposed to, say, props), it must be added onto a designated anchor element, styled as v-mdb-smooth.

Show code

template
script

        
            
          <template>
            <main>
              <!--Navigation links with a v-mdb-smooth directive-->
              <mdb-row>
                <ul class="smooth-scroll list-unstyled">
                  <li>
                    <h5>
                      <a href="#test1" v-mdb-smooth
                        >Click to scroll to section 1</a
                      >
                    </h5>
                  </li>
                  <br />
                  <li>
                    <h5>
                      <a href="#test2" v-mdb-smooth
                        >Click to scroll to section 2</a
                      >
                    </h5>
                  </li>
                  <br />
                </ul>
              </mdb-row>
              <!--Dummy sections some distance away with IDs coressponding with the links above-->
              <div id="test1">
                <h3>Section 1</h3>
                <hr />
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
              </div>
              <div id="test2">
                <h3>Section 2</h3>
                <hr />
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
                <h5>Smooth Scroll Example</h5>
              </div>
            </main>
          </template>

        
            
          <script>
            import { mdbRow, mdbSmooth } from "mdbvue";
            export default {
              components: {
                mdbRow
              },
              directives: {
                mdbSmooth
              }
            };
          </script>