[Support request] Smooth scroll not scrolling smoothly in any browser.

[Wesley]

Hi there,

In Chrome, Firefox, and Edge, for me, smooth scrolling is simply adding a slight “pause” before jumping directly to anchor point link, rather than scrolling smoothly to the link.

In Safari (desktop), the class="smooth-scroll" buttons do not function at all when smooth scrolling option is turned on in Customizer.

• WordPress is up to date
• Generatepress, GP Premium, and GeneratePress child theme are all up to date
• Smooth scrolling is enabled in Customizer settings for GP
• smooth-scroll class is added to linking element
• Anchor links are correctly added
• Network tab shows that smoothscroll.min.js is loading (in footer)
• Already tried disabling all other plugins to check for code conflicts
• No server caching or caching plugins active on site

[Elvin]

Hi there,

I’ve inspected your site and it needs a bit of a correction. The class should be added to the <a> tag instead of its wrapper element.

See David’s answer about this here:
https://generatepress.com/forums/topic/smooth-scroll-not-working-and-still-over-shot/#post-1728598

[Wesley]

Hi Elvin, thanks for the reply.

In David’s same answer that you linked, he also provides a PHP snippet to allow ALL elements to be used with smooth-scroll, not just a tags. (This is because Gutenberg only allows you to add a class to the button wrapper, not to the a tag itself.) I have that snippet added.

You can see that the PHP snippet is working and the smooth-scroll JS is being called because of the “pause” before the scroll when you turn smooth scroll on, which is otherwise not there:

• with smooth scroll turned OFF in GP customizer, the links jump directly down
• with smooth scroll turned ON in GP customizer, the links “pause” or scroll a tiny bit, and then jump directly down (and in Safari, the links no longer work at all)

So you can see that the issue is not that the JS is not being triggered in the first place, otherwise the behavior would not change when you turn smooth scroll on in the GP options.

(And to be double-sure that that was not the issue, I also tested adding the smooth-scroll class directly to an a tag, and it still does the exact same thing.)

[David]

Hi there,

i disabled the EventListners in the browser dev tools that are were added by the bbox-min.js ( accompanying script bbox-donation-min.js ) and the smooth-scroll worked correctly.

Can’t say for certain if that is conflicting – but can you temporarily disable other plugins aside from GPP premium to see if there is a conflict?

[Wesley]

I had added scroll-behavior: smooth to the CSS for native CSS support, but that is not supported in Safari (desktop or mobile).

With all plugins except GP Premium disabled (and CSS scroll-behavior: smooth also disabled), the GP smooth scrolling is still not working for me in any browser — it just “hangs” for a second and then jumps like normal.

[Wesley]

I have set up a duplicate page which removes the bb-box element entirely — the behavior is the same — a lag, then a jump (and smooth-scroll links not functioning at all in Safari desktop): https://wesleyd6.sg-host.com/home2

[David]

That URL has no content on the page ?

[William]

FYI – in case anyone is still cruising this thread.

I turned off the Lazy Loading being applied by my image optimizing plugin (Smush), and the pause went away 🙂

I only had this pause problem on a page loaded with images – text-only pages never had the pause.

For what itʻs worth 🙂

_bill

[David]

Thanks for letting us know your findings Bill !

[Author]

Posts