Archived topic
How to add smooth scroll to Headline block
13 replies · Started by Jeffrey on March 6, 2022
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
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/
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?
Did you take a look at the video in the documentation David linked?
It's using the block editor:
https://youtu.be/f_OaAiJ3oV4?t=85
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?
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
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.
Can you link me to an example page that's not working?
The link in the original topic goes to error404.
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 :)
Sounds good :)
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.
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/
David, you are the man! The snippet work perfectly :-) Thank you!
Glad to hear that!
