Mobile Menu Navigates To Wrong Place On Page

Hi there,

Hmm I thought this is fixed here:
https://generatepress.com/forums/topic/smooth-scroll-4/#post-549703

Can you do me a favor and double check you are indeed using GP Premium 1.7.2?

Thanks!

Hi Leo:

I confirm I'm using 1.7.2.

I tried the fix in your link but it did not work for my "product" anchor. Furthermore it caused all of my desktop anchor alignments to be pushed down an inch (or so), making them not as good. The desktop site is perfect right now without that update.

Thank you,
Kurt

Very strange. Any other plugins on the site that include smooth scroll functionality? What happens if you remove the smooth-scroll class from the items?

The only other plugin that I thought might impact it was "cookie notice" by dFactory. I deactivated it and it made no difference. I removed smooth-scroll from the menu item "product" and it stopped scrolling smoothly but still went to the wrong place on mobile. Thank you!

Hmm ok, that's interesting. What if you disable smooth scroll in "Customize > General"? There won't be any smooth scroll (obviously), but I'm interested to know whether it goes to the correct place or not.

If it doesn't, we're looking at something on your site changing the core functionality of anchor links.

Disabling "Customize > General" smooth-scroll didn't fix it. But I suspect I might have just realized the issue. I have 2 "Product" sections, one for desktop and one for mobile. I have "hide-on" for each set appropriately. The anchor link works on desktop but not mobile. Perhaps I need to do something different with anchoring if I'm going to have a section hidden on mobile...???

To follow-up, when I have a single "product" section the mobile scrolling is better. The only issue is on initial click to "product", it scrolls down too far, but "uses" always scrolls properly. On the second an subsequent clicks, "product" scrolls correctly. I'm not sure why, but I'm testing. Any ideas welcome!

Are the IDs different between each section? You shouldn't have two elements on the same page with the same ID - it's not valid HTML and can definitely cause anchor issues.

To clarify, I removed the second "product" section so that there is only 1 section with the "product" anchor on it. So that's a good note for future reference: if folks are using the "hide-on" and have duplicate sections, it will break. Maybe that's obvious to most folks, but not to me.

The only remaining issue is that on initial click to “product” on mobile, it scrolls down too far, but “uses” always scrolls properly. On the second and subsequent clicks, “product” scrolls correctly. I’m not sure why, but I’m testing.

All links work fine on desktop.

Any ideas welcome and thank you!

That used to be a bug, but it shouldn't be an issue anymore.

Any chance you can disable Autoptimize so I can take a closer look at the source?

Thanks. I disabled Autoptimize.

Hmm, all looks fine. Let me know do some tests - I'll get back to you.

Can you try replacing the contents of:

wp-content/plugins/gp-premium/general/js/smooth-scroll.min.js

With this file: https://gist.github.com/generatepress/cca22b47744175d840f01483c3960697

Then clear your browser cache and give it a shot.

I did as you asked. It didn't change the "product" link going to the wrong place in an incognito tab. Interestingly here's what happens:

load page
open menu
click "product" = page scrolls down to far
open menu
click "product" = page scrolls back up the perfect place (on the this second click)

Other note: all the links exhibit this behavior. It seems that after I click on any single specific mobile menu link a second time, they all start scrolling to the appropriate place. But before that they all scroll to the wrong place.

Thanks for your help!