[Resolved] Smooth Scroll

[Andy]

Hi,
Really loving the new built-in smooth scroll function which works perfectly on desktop. However, on mobile I’m finding any anchor links in the mobile menu scroll too far past the start of the target section.

For example if you click on the FAQ link in the menu on desktop it scrolls to a perfect position at the start of the FAQ section. However, in mobile view it scrolls much further down passing the top third of the FAQ section. Is there any way around this?

Edit: I’ve just noticed the links seem to scroll correctly from the mobile sticky menu but not from the standard mobile drop-down menu.

[Andy]

Also, I see the enquiry form / contact us menu links don’t quite scroll down to the target sections when you click them while on the Terms page.

[Tom]

Ah, I think it’s finding the offset to prevent the sticky nav from overlapping your content. However, it’s getting the height of the nav when open, which is causing the issue.

Let me know look into this a bit more – might need an update.

[Andy]

Thanks Tom, at first I thought it might have something to do with the sticky nav overlap but it seems to work ok on links within the sticky nav but not from the standard menu.

[Andy]

Any progress with this at all?.

[Tom]

Still trying to figure out the best way to fix it. Will update this topic tomorrow 🙂

[Andy]

Sorry to keep bothering you Tom, but any closer to a solution?.

[Tom]

I believe I have it fixed.

To test, replace the contents of gp-premium/general/js/smooth-scroll.min.js with this: https://pastebin.com/uK95XaFY

[Andy]

Thank you, working perfectly on mobile now too.

The only thing that isn’t working quite as well is, when on a different page to the anchor links (e.g Terms), FAQ link works ok, but the Enquiry/Contact links don’t quite take you to the enquiry section. It kind of bounces back up from the bottom to the middle of the page.
I’m wondering if its because that section is right at the bottom of the page and there’s nowhere for the scrollbar to go. Any ideas?

[Tom]

The Terms page is behind a password. Can you append it to the hidden URL in your original post so I can take a look?

[Andy]

The whole site uses the same password as the homepage, is it not working for you?

[Tom]

See it now. Does that issue go away if you disable the Smooth Scroll script?

[Andy]

Unfortunately not, I’ve disabled both Smooth Scroll and Sticky Nav and the problem remains, so it seems this is a seperate issue. I’ve left them disabled for you to see.

[Tom]

I wonder if there’s something loading on the page a little late, causing the page to jump in height once it loads. Maybe the Google Map? Another element on the page?

[Andy]

I tried removing the Google Map, the FAQ Accordion and even the form itself which means there is no extra JS being loaded, just standard GP sections and text/images but unfortunately it’s still happening.

I do notice that in mobile/tablet view it does seem to work better because there is more viewport height for it to scroll down through, so it doesnt do that jumping back up again. So I tried moving the whole contact us section up to just below the FAQ section and above the Services section and then it worked perfectly.

[Author]

Posts