Topic: I cannot get the smooth scroll to work from navbar items
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.
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
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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
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')"