[Resolved] GPP / Customizer / Smooth-scroll

[Jan]

Hi David,

I’d like to add a smooth-scroll feature to a headline block.

What I did to get there:

1) Activated smooth-scroll in the Customizer/General
2) Added the smooth-scroll class to the headline block
3) Added a link to the headline block

The feature, however, is not working.

What am I missing?

Any advice is much appreciated.

Thanks,
Jan

[Fernando]

Hi Jan,

The smooth-scroll should go to the Button or Menu item that directs to the Headline. Make sure to add the id you set as the link to the button or the menu item.

This article explains it: https://docs.generatepress.com/article/smooth-scroll/

[Jan]

Hi Fernando,

many thanks for getting back.

I went over the suggested article and correctly embedded the CSS class for regular links. This part works very well now.

There is another link that I’d like to attache to the Image block. Just like regular links I added the CSS class to the <a href...> element via Code editor.

<!-- wp:generateblocks/image {"uniqueId":"0d693c73","mediaId":15857,"sizeSlug":"thumbnail","height":"40px","objectFit":"contain","alignment":"center","className":"smooth-scroll"} -->
<figure class="gb-block-image gb-block-image-0d693c73"><a class="smooth-scroll" href="#was"><img class="gb-image gb-image-0d693c73 smooth-scroll" src="https://b3tipr.myraidbox.de/wp-content/uploads/turbine-150x150.png" alt="" title="turbine"/></a></figure>
<!-- /wp:generateblocks/image --> 

This throws an error in the Visual editor.

Any thoughts on how to fix that?

Thanks,
Jan

[Fernando]

How are you adding the class?

For reference, here’s an example of how to add Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[Jan]

Hi Fernando,

I open die page in the Code Editor and then inject the class="smooth-scroll" into the element. See code snippet in the previous answer.

Best,
Jan

[Fernando]

I see. Can you add it this way instead?: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[Jan]

Hi Fernando,

sorry for not getting back earlier.

The very same option is what I had in place to begin with, but it did not work ;-/

I checked the settings of the image block once more and compared those with the documentation that you shared. No difference.

Any idea as to what I’m doing wrong?

Thanks,
Jan

[David]

Hi there,

you cannot add the class to the <a> surrounding the image using that method.

Instead you can make it so the smooth-scroll acts on all # links – see here for the PHP Snippet to do that:

https://docs.generatepress.com/article/generate_smooth_scroll_elements/

[Jan]

Hi David,

this works very well indeed.

Many thanks,
Jan

[David]

Glad to be of help!

[Author]

Posts