[Support request] Conflict with elementor anchor links

[Kitti]

Hi guys!

Elementor support team found that GP theme causes anchor menu links to work unstable. It just jumps to unreasonable places, and even if it jumps to the correct place, there is a huge offset. Please check this screenshot video to demonstrate:
https://www.loom.com/share/e027855d32674a1781229e048474bbb4

If I switch theme, anchor links works just fine.

Could you please investigate it?
Thank you in advance!
Kitti

[Fernando]

Hi Kitti,

If you have smooth scroll enable in Appearance > Customize > General, can you disable it?

If that doesn’t work, to have a better understanding of the issue, may you kindly provide the link to the site in question?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon.

[Kitti]

Hi Fernando!

Thnaks for the quick reply!
Smooth scroll is not enabled.

I send you the credentials to investigate further.

[Fernando]

What specific page is the one in your Loom video? Can you link it as well? I’ll try to replicate the issue from my end.

[Kitti]

I send you the link. Thanks for checking!

[David]

Hi there,

in Customizer > General. Do you have the Smooth scroll enabled ? If so, can you uncheck that.

[Kitti]

Thank your David but I’ve already answered to this.

[David]

Sorry i missed that.
In Customizer > Layout > Footer, disable the Back to Top feature.

The smooth scroll and back to top are the only scripts that GP loads that would interfere with scrolling.

[Kitti]

I turned off Back to Top but nothing changed, still jumps to places it should not.

[David]

Can you clear any caching – as i still see the GP back-to-top script loading.

[Kitti]

I’ve cleared cache as you asked.

[David]

Is the Back to Top Button disabled in Customizer > Layout > Footer ?
As i still see the HTML and Javascript being loaded for it.
And that is the only script that GP is loading that could affect scrolling.

But…. i don’t think that is the issue.
In your Customizer > Additional CSS you have this:

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100vw; 
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

Which will mess with the page scrolling.
Try removing that CSS.

As a note – Customizer > Additional CSS is saved in the Theme options, so when you switch theme you would have lost that CSS, until you switched back to GP.

[Kitti]

Ahh, indeed, you are right David! Thank you for your help and time!

I know it is out of your support scope but maybe you can help with this too: Do you have any idea how can I hide overflow-x without risking again the page scrolling?

[David]

Glad to hear thats working.

If i have to stop horizontal scrolling using CSS, i generally do this and as its only hiding the x direction it shouldn’t impact vertical scrolling:

body, html {
    overflow-x: hidden;
}

[Kitti]

Thank you very much David! I really appreciate your time. 🙂
Now both are working perfectly: anchor links and no horizontal scrolling.

Have a nice day!

[Author]

Posts