Warning: session_start(): open(/var/lib/php/fpm/session/sess_0emp36shakkf12p5vtcsb4rvpa, O_RDWR) failed: No such file or directory (2) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64
Vue Smooth Scroll Directive - Bootstrap 4 & Material Design - Material Design for Bootstrap

SmoothScroll MDB Pro component

Vue Smooth Scroll - Bootstrap 4 & Material Design

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

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

Section 1


Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example

Section 2


Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example