[Resolved] How to add smooth scroll to Headline block

[Jeffrey]

Hello, I’ve activated smooth scroll in the customizer, and added the CSS class to the Headline block that is linking to the HTML anchor. The link works, though smooth scroll isn’t working. I tried it on a button, and it works with that.

Could you please instruct me on how to fix this? I’ve tried looking at other support topics and the documentation but I can’t seem to figure it out. I’ve included my site. The link in question is: “コースデザイン (アクセス)”. If you run a ctrl+f on it you’ll be able to find it.

Thanks

[David]

Hi there,

the link must have a class="smooth-scroll" attribute.
See here:

https://docs.generatepress.com/article/smooth-scroll/

Of an easier solution if you have many links is to enable smooth-scroll on ALL on page links by adding the PHP Snippet provided here:

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

[Jeffrey]

Thanks. I saw that, though I wasn’t sure how to add the class=”smooth-scroll” attribute. Where does the

<a href="#my-section">My Section</a>

go in the block editor?

[Leo]

Did you take a look at the video in the documentation David linked?

It’s using the block editor:

[Jeffrey]

Sorry, I meant to include this code:

<a class="smooth-scroll" href="#my-section">My Section</a>

I figured it out – I didn’t see that there was an option to edit a block in html. I was able to insert the smooth-scroll in there and it’s working.

The video touches on buttons and menu links. It doesn’t show other elements (such as headlines). Unless I’m missing something?

[Leo]

You shouldn’t need to edit the block in HTML.

THe link field which is also available in headline block should be what you are looking for:
https://www.screencast.com/t/KNMQjxGF

[Jeffrey]

It only works if I add the class in the HTML – I followed the steps (1. add the html anchor, 2. link to html anchor with the link field, 3. add the css class in the advanced settings of smooth-scroll) and it didn’t work.
I explained above that it works on buttons, but not headlines.

[Leo]

Can you link me to an example page that’s not working?

The link in the original topic goes to error404.

[Jeffrey]

I don’t have much time and it’s working when I add it directly to the html so I’m going to go ahead and mark it as resolved 🙂

[Leo]

Sounds good 🙂

[Karl]

I have the same problem. In the product roundup list here: https://velstelt.no/anbefalte-produkter/harklipper-test/ if you click the “les mer” links (read more in norwegian) it jumps to a section, it’s not smooth 🙁 Links in a li element and buttons work fine. Regular paragraphs or any type of headline does not work with smooth-scroll class. At least not for me.

[David]

Hi there,

that method won’t work as the smooth-scroll class must be on the <a> and with a headline block the class will be added to the p ( or H ) tag.

If you use a GB Button block, you can strip the styling away to make it look like a regular link and then the class will be on <a>

Alternatively you can use the PHP Snippet provided in this article to add smooth scroll to all # jump links

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

[Karl]

David, you are the man! The snippet work perfectly 🙂 Thank you!

[David]

Glad to hear that!

[Author]

Posts