[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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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:

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts