[Resolved] Smooth Scroll not working with GenerateBlocks

[George]

I have trouble making the smooth scroll work (I have obviously activated it). Using GenerateBlocks, I insert a GB button and set its class to smooth-scroll. I also set its link to #album. Further down the page, I have a headline with an Element ID of album. While viewing the page and clicking on the button, the page jumps to the headline element but without smooth scroll.

Inspecting the code of the button code:

<a class="gb-button gb-button-c18b5f49 smooth-scroll" href="#album"><span class="button-text">Play now</span></a>

and the headline
<h3 id="album" class="gb-headline gb-headline-b6413a82">You are your only limit</h3>

What is the problem?

[David]

Hi there,

can you provide a link to a page where we can see the issue?

[Marcel]

Interested also.

[George]

I’ve updated the original thread with a link. The PLAY NOW button at the top has a class of smooth-scroll linking to #album. The container underneath has an element ID of album.

Also, using the latest GB beta 4.

[Tom]

Seems to be working for me in Chrome and Firefox. Did you get it fixed?

[George]

No, I didn’t touch. It doesn’t work for me! Tried in Firefox and Chrome. In Private and Incognito windows respectively with addons disabled! It jumps to the section without smooth scroll. No console errors either.

[George]

It works on my Android phone, though! And my old Ipad 2 on Safari. Also works on Edge! Not working in Opera.

[George]

Hmmm. Tom, I think we might have a recurrence of this!
https://generatepress.com/forums/topic/smooth-scroll-not-working-3/

I am on a Win10 laptop, both browsers updated.

Could it be a case of this?
https://generatepress.com/forums/topic/smooth-scroll-how-to/

And I need to use generate_smooth_scroll_elements or similar filter for the button instead?

[Tom]

It shouldn’t be, as the class is added to the button directly.

Does this work for you?: https://codepen.io/cferdinandi/pen/wQzrdM

[George]

No, exatly the same behavior. Works on Edge and Blisk browser on desktop and my Android phone.

Does not work on Firefox, Chrome, Opera on Desktop.

I am on Windows 10 on a laptop.

[Tom]

So it seems there’s something up with your computer and the smooth scroll library we’re using: https://github.com/cferdinandi/smooth-scroll

Looks like they’ve just archived it in favor of using the new built-in CSS method.

Have you tried on another computer?

[George]

No access to another computer now, I will try tomorrow. But the CSS method worked but just for Firefox. It still doesn’t work on Chrome and Opera. I will let you know once I test on another computer tomorrow!

[Tom]

Sounds good, thanks!

[George]

You wouldn’t believe what it was!
Known Issues: Reduced Motion Settings
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

I just had to activate the option on Windows 10: Settings > Ease of Access > Display > Show animations. It works everywhere now.

Thanks for the link, it helped!

[Tom]

Awesome! Glad it’s working now 🙂

[Author]

Posts