Smooth Scroll 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.

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>