Topic: MDB5 SmootScroll throws error if called by JS
Expected behavior activate SmootScroll by javascript:
new mdb.SmoothScroll(document.getElementById('idname'))
Actual behavior
Uncaught TypeError: can't access property "includes", this._href is null
Resources (screenshots, code snippets etc.) This procedure is explained at https://mdbootstrap.com/docs/standard/methods/smooth-scroll/#docsTabsAPI
Example snippet: https://mdbootstrap.com/snippets/standard/juan_carlos_zeledon_paniagua/2938470
The id should be added to the item you are clicking on, not the target item. I have prepared a working example: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2944560#js-tab-view
Hi Grzegorz,
Thanks for the code but it doesn't working by JS. The scroll works because you are clicking on an anchor element and it's taken the attributtes.
Can you make a JS example, please? I updated my snippet taking the instance of anchor element, not the target but it still not working.
Thanks!
Grzegorz Bujański staff commented 6 days ago
It doesn't work that way. Without initialization via JS, my example will not work. Remove the js code from my example and you will see that the example stops working.
Your example won't work the way you want it to work. At this point, you are trying to create a new class instance on the element where the class instance already exists. But this will not make the page scroll to the right place when you click on this button.
You could change the code so that the id refers to the Smooth Scroll by JS button,
but this will cause the first click initiate a smooth scroll, and the next click scroll the page. Therefore, this is also not a good solution.
Answered
- User: Pro
- Premium support: No
- Technology: MDB 5
- MDB Version: 3.2.0
- Device: Laptop
- Browser: Chrome, Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes