I cannot get the smooth scroll to work from navbar items


Topic: I cannot get the smooth scroll to work from navbar items

Ioannis Papadopoulos asked 4 years ago

While I have followed the demo example code for smooth scrolling, it does not seem to be working. I am trying to implement it for the navbar items. The page jumps to the desired section, but it does not scroll at all. Note that not even the demo is working: It jumps to the target section in the page but without scrolling.


Ioannis Papadopoulos commented 4 years ago

The javascript console shows the following error whenever I am using the v-mdb-smooth directive: [Vue warn]: Error in directive mdb-smooth inserted hook: "TypeError: undefined is not an object (evaluating 'n.startsWith')"


Magdalena Dembna staff premium commented 4 years ago

Can you share your code snippet so I could reproduce your issue? Best regards, Magdalena


Ioannis Papadopoulos commented 4 years ago

Hello the code is the SmoothScrollPage.vue file from the downloaded demo:

SmoothScroll Docs

  • Click to scroll to section 1

  • Click to scroll to section 2

  • <div style="margin-top: 1000px">
      <h3><a id="test1" href="#top" v-mdb-smooth>Section 1</a></h3>
      <a href="#top" v-mdb-smooth>Back to top</a>
      <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 style="margin-top: 500px">
      <h3><a id="test2" href="#test2">Section 2</a></h3>
      <a href="#top" v-mdb-smooth>Back to top</a>
      <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>
    
    <section class="demo-section mt-5">
      <h4>Example with container</h4>
      <a href="#first-heading" v-mdb-smooth>First heading</a><br>
      <a href="#second-heading" v-mdb-smooth>Second heading</a>
      <section style="height: 300px; overflow-y: scroll">
        <h5 id="first-heading" style="margin-top: 200px">First heading</h5>
        <h5 id="second-heading" style="margin-top: 200px; margin-bottom: 400px">Second heading</h5>
      </section>
    </section>
    

    import { mdbContainer, mdbRow, mdbIcon, mdbSmooth } from 'mdbvue'; export default { name: "SmoothScrollPage", components: { mdbContainer, mdbRow, mdbIcon }, directives: { mdbSmooth } };


    Mikołaj Smoleński staff commented 4 years ago

    Please try to use camelCase instead of kebab-case id names. Maybe that's why it's not working correctly. Best regards


    Ioannis Papadopoulos commented 4 years ago

    camelCase does not solve the problem. At the same time, when using v-mdb-smooth in a mdb-nav-item it generates an error, as I can see in the javascript console: [Vue warn]: Error in directive mdb-smooth inserted hook: "TypeError: undefined is not an object (evaluating 'n.startsWith')"


    Mikołaj Smoleński staff answered 4 years ago

    In custom components You should add directive with value. Here's an example:

    <mdb-nav-item href="#first-heading" v-mdb-smooth="'#first-heading'">First heading</mdb-nav-item>
    

    Best regards


    Ioannis Papadopoulos commented 4 years ago

    Thank you. It looks as if this solves the error issue. However, it works perfectly well on Firefox and Chrome, but not on Safari.


    Mikołaj Smoleński staff commented 4 years ago

    Thanks for remarks. I added the issue with Safari to our bug fix list. We're going to update the directive as soon as possible. Best regards


    Ioannis Papadopoulos commented 4 years ago

    Hello Mikołaj Do you have any estimate on when the fix will be released? Thanks


    Mikołaj Smoleński staff commented 4 years ago

    Most likely it will be in the Q4 2020. Best regards


    Mikołaj Smoleński staff answered 4 years ago

    Hi there again,

    As I can see the code you shared is different than in our demo. Please check the following code:

     <template>
      <mdb-container>
        <mdb-row>
          <ul class="smooth-scroll list-unstyled">
            <li>
              <h5><a href="#test1" v-mdb-smooth="'#test1'">Click to scroll to section 1</a></h5>
            </li>
    
    
            <li>
              <h5><a href="#test2" v-mdb-smooth>Click to scroll to section 2</a></h5>
            </li>
    
    
          </ul>
        </mdb-row>
    
        <div style="margin-top: 1000px">
          <h3><a id="test1" href="#top" v-mdb-smooth>Section 1</a></h3>
          <a href="#top" v-mdb-smooth>Back to top</a>
          <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 style="margin-top: 500px">
          <h3><a id="test2" href="#test2">Section 2</a></h3>
          <a href="#top" v-mdb-smooth>Back to top</a>
          <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>
    
        <section class="demo-section mt-5">
          <h4>Example with container</h4>
          <a href="#first-heading" v-mdb-smooth>First heading</a>
    
          <a href="#second-heading" v-mdb-smooth>Second heading</a>
          <section style="height: 300px; overflow-y: scroll">
            <h5 id="first-heading" style="margin-top: 200px">First heading</h5>
            <h5 id="second-heading" style="margin-top: 200px; margin-bottom: 400px">Second heading</h5>
          </section>
        </section>
      </mdb-container>
    </template>
    
    <script>
    import { mdbContainer, mdbRow, mdbIcon, mdbSmooth } from 'mdbvue';
    export default {
      name: "SmoothScrollPage",
      components: {
        mdbContainer,
        mdbRow,
        mdbIcon
      },
      directives: {
        mdbSmooth
      }
    };
    </script>
    

    Here's a working demo, which proves it works correctly. https://vue.mdbootstrap.com/#/directives/pro/smooth

    Best regards


    Ioannis Papadopoulos commented 4 years ago

    Hello, I just tested the demo of the link. It works perfectly well on Chrome and Firefox, but on Safari. Moreover, this still does not answer my question: why does it not work with a mdb-nav-item element?


    Please insert min. 20 characters.

    FREE CONSULTATION

    Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

    Status

    Answered

    Specification of the issue
    • User: Free
    • Premium support: No
    • Technology: MDB Vue
    • MDB Version: 6.7.1
    • Device: Macbook Pro
    • Browser: Safari
    • OS: MacOS
    • Provided sample code: No
    • Provided link: No