Scroll anchor bug

Hi all!
When i click on the contact button, the scroll anchor doesn’t go to the right place on the first click, which is the footer with form. When i am on the home page i have no problems. It is only when i am on any other page.
so on this page for example:
https://wordpress-724181-2932291.cloudwaysapps.com/website-management/

Environment info

  • WordPress version: 6.1.1
  • Cwicly Plugin version: 1.2.9.5.5
  • Cwicly Theme version: 1.0.3

Hi @pixelzaken,

Sorry to hear you’re experiencing trouble with this.

Could you possibly let me know if this is happening in every browser, and every time the page is refreshed.
Or does this only happen when the page is loaded for the first time?

Thank you in advance.

1 Like

I experience the problem in firefox, chrome and Safari on my mac.
Everytime i go to the website management page and click on the contact button, the scroll doesn’t work. It does work properly on the homepage.

Thanks for looking in to this!

Could you try to link the div instead of the paragraph and report if the issue persists?

image

Thanks for thinking along. With the div i have the same problem.
This is what happens after first try.

And this is what happens after the second try (how it should be):

Can you confirm that’s also happening in incognito mode (logged out and in best case all your browser add-ons disabled)?

1 Like

I have the problem in safari aswell ( not logged in, no-addons). I dont know about incognito mode. Will look into that.

I see several issues here.

  • You are using an empty p tag as your anchor. This might lead to issues, although it’s valid HTML (I’d assume).
  • The anchor element (paragraph) is positioned absolutely without its parent positioned relatively.
  • You set a bottom property on your paragraph, probably because the top property didn’t work because of the missing relatively positioned parent div.

I was able to reproduce this issue in Firefox.
Your paragraph was placed somewhere else.

Here is where it’s intended to be.

I’m not quite sure why you are using this interesting method of an anchor.
Targeting the div instead of the paragraph should work though, so I’m not sure if all this stuff is related.
Could you revert to the div anchor temporarily, and I will check things on my end?

There might be other stuff involved though, like the accordion.

The idea was to add a paragraph which was positioned absolute, so i could decide the place where to scroll to. I didn’t think this would cause any problems? but i will look into it!

I understand, but as it seems you are scrolling to the very top of the div anyway?
Also keep in mind that the scroll-margin property is available in Cwicly, to fine-tune your scrolling position.

image

Please also check this video.

1 Like

I have changed the link to the div-ID, but when i am on the website management page, this problem stil persists. But yeah ur right, no need for the paragraph xd.

Also i removed the accordion, but the problem still persists even then. (display none, on the section)

And cool! i didn’t know this function : )
Also, for the team and portofolio link i have the same paragrap anchor method, and i have no problems there when scrolling from another page.

Thanks!

I can confirm it’s not fixed.
However, it appears not to be consistent on my side.
Is this happening 10 out of 10 times on yours?

I’ve also encountered some unwanted behaviours when it comes to anchor scroll, but I can’t say if it’s Cwicly or browser related.

An example from a tutorial I posted here.
Clicking the anchor link button won’t always bring me to my anchor.

Happens at 0:14, 0:22, 0:31.

Edit
Probably, it’s because of unintended mouse wheel action during the scroll.
I use a free scroll mouse which could be the culprit here.
After locking the mouse wheel, it’s not happening again.
However, I also faced such behaviour when testing on a mobile device, so I’m not entirely sure.

In case this is an issue, it’s not related to this topic (most likely).

1 Like

When coming from any page other then the homepage, with a link to the footer on the homepage i have the problem 10/10. Maybe it has something to do with the form being disabled on other pages.
I have the same problem on your page aswell.

Ps: here i have a link of what it looks like on my end: Video

1 Like

That’s worth testing imo.
Would require removing the form - display:none won’t work, scripts will still load.
Thanks for testing my page as well. I updated the post.

My guess is that it’s some script related stuff.
Hopefully, you’ll receive positive feedback from the team.

PS: Your video is not working.

I will give that a try. I updated the video link. Thanks for your help! I really appreciate it.

1 Like

After looking into it, i did it with conditional logic. I made a template with the form within and displayed that only in the footer of the homepage. After removing the conditions the result was still the same.

Hello @pixelzaken,

Looking at this, it seems that the issue is with the Gravity Forms form that isn’t displayed on load → display:none rule applied until their JS shows it.

This explains that when coming from another page, the browser is scrolling to the correct position of the section before Gravity Forms shows the form.

1 Like

Alright! Thanks for investigating. Should i contact Gravity Forms for this? or is there a easy fix for this?

Thanks!

I contacted gravity forms and this is what they said:
“Gravity Forms doesn’t play any role in the issue you’re reporting. The anchors used are not handled by Gravity Forms, and scrolling to those anchor is not handled by Gravity Forms either.”