SmoothScroll MDB Pro component

Vue Smooth Scroll - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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.

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>