Smooth-scroll not working on GenerateBlocks containers

Hi Leo,

Upon viewing your site, I found that the smooth-scroll class is added to the container <a> element. The class should be added to the <a> tag instead of its wrapper element.

With that said, can you try moving the smooth-scroll class to the <a> tag and see if this will resolve the issue?

You can try doing this through the Code editor.

See this as reference: https://share.getcloudapp.com/wbuYqAB9

In this screenshot, I manually added

class=“smooth-scroll”

inside the <a> tag.

Kindly let us know how this goes. Hope to hear from you soon! :)

I added the class to an <a> tag into the <h2> tag, and now it works.

I'm a bit disappointed, though, because I wanted the whole container to work as a button with a smooth scroll property, not just the text in the container. Isn't it possible to do that?

Thank you, Fernando! :)

You're welcome Leo! :)

With regards to turning a container to a link with smooth scroll functionality, this is doable through GenerateBlocks Pro and a PHP snippet.

Through GB Pro, you’ll have the option to turn a Container to a link: https://share.getcloudapp.com/qGur40ZN

Then, through this PHP snippet, you can make all “#” links have the smooth scroll functionality:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'a[href*="#"]';
  
  return $elements;
} );

See this for reference: https://docs.generatepress.com/article/generate_smooth_scroll_elements/

Here is how to add PHP snippets: https://docs.generatepress.com/article/adding-php/

Hope this helps! :)

That was just what I wanted. It works perfectly. Very kind of you, many thanks, Fernando! :)

Sorry to bother you again, but that solution has generated a new issue: the "Effects" on the Headline block (wrapped by the Container block) don't work anymore.

However, the effects on the outer Container block do work.

To have the hover effect on H2, select the container, choose hoveras state, add h2 as the custom selector:
https://www.screencast.com/t/RA5Nf1Hkx8

Let me know if this helps :)

It's working fine now, thank you! I got almost what I wanted. Just one detail is missing.

I added an effect to dark the background on hoover. Fine. Then, I added two more transitions for this effect, so there should be a delay of 0.5 seconds when the background gets darker and when it gets back to normal. You can see it here:
https://www.screencast.com/t/OnNRpKjgUmBn

However, any of both transitions on the background images aren't working (please check the grid of eight buttons at the beginning of the page):
https://www.ruskus-patruskus.com/espectacles-infantils/animacio-infantil/

The effect you are using is a CSS property called mix-blend-mode.

As far as I know, this property will break the opacity transition effect.

I would suggest to remove this mix-blend-mode effect, but simply set hover state of background image opacity to 0.2 to achieve the same visual result.

Now it is perfect. Thank you, Ying!

You are welcome :)