Smooth Scroll not working with SPA

======== TEMPLATE BUG FORM ========

Wappler Version : 3.3.3
Operating System : Windows 10 Pro

Expected behavior

The link should show the ID and smooth scroll to the ID entered

Actual behavior

The page is not retrieving the ID entered so the smooth scrolling effect is not working at all

How to reproduce

Add the smooth scroll component and add the smooth scroll attribute to a button for example.

Screen Shot 2020-09-30 at 11.06.41 Screen Shot 2020-09-30 at 11.07.08

Is this screenshot from Wappler code view or from your browser?
What exactly have you entered in the UI for it? It if it’s Wappler code view, this looks to me like this anchor button code has been copied from a rendered page in your browser.

The last screeshot is from my browser, the two others are from Wappler.

Here is what I entered in Wappler:
<a class="btn text-uppercase btn-primary btn-sm mb-1" dmx-on:click="smoothScroll.goto('#top')"><i class="fas fa-arrow-up"></i></a>

This component is correctly loaded by this code on top of the file:
<!-- Wappler include head-page="layouts/main" bootstrap4="local" is="dmx-app" id="resources" appConnect="local" fontawesome_5="local" jquery_34="local" components="{dmxSmoothScroll:{},dmxNotifications:{}}" -->

So you are using dynamic onclick event and not href="#target"?

Yes I am. Should I use href from now? It was working fine before I enabled the SPA on my project :sweat_smile:

No, it should work - i just thought you were using the href attribute as your screenshot is pointing to it:

Do you see any errors in the browser console?

Ah OK, actually I sent this screenshot to show how it’s rendered in my browser, to help identifying the issue :smiley:

Are there errors in the console?

It’s so fast, I can barely see it, I made a video: https://jumpshare.com/v/XGE2GIMucOJGxyqwbpcO

The error is:

Screenshot_3

Goto requires a valid CSS selector and /#top is not one. It should be #top

More about CCS selectors:

https://www.w3schools.com/cssref/css_selectors.asp

Yes, I know that, actually I added / just for testing purpose because I had this issue with the smooth scroll, but even if I remove it, it is not working. And no error in my console. :frowning:

And do you have an element with an id="top" on your page? Do you have a link where we can check this?

Yes I have this ID in my page.
Actually, as I said, it was working great before I enabled the SPA… :smiley:

Where should i check this on your page? Where is the button located?

Sorry, wrong page.

Does it make any difference if you add: href="javascript:void(0)" to the anchor tag?

1 Like

Nop, not working, but at least I’m not redirected to the homepage anymore… :smiley:

Don’t use the goto action, just set #top on the href of the link.

@Teodor @patrick I changed the link to an anchor inside the content page instead of an anchor outsie of the “layout” page and added “javascript:void(0)”, it’s now working.

But it’s not working without “javascript:void(0)” and with an anchor outside the content page (even if it’s available in the same page in my browser).