[Resolved] How to add smooth scroll to Headline block

Home Forums Support [Resolved] How to add smooth scroll to Headline block

Home Forums Support How to add smooth scroll to Headline block

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2144146
    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

    #2144445
    David
    Staff
    Customer Support

    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/

    #2144662
    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?

    #2144668
    Leo
    Staff
    Customer Support

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

    It’s using the block editor:

    #2144682
    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?

    #2144684
    Leo
    Staff
    Customer Support

    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

    #2144688
    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.

    #2144709
    Leo
    Staff
    Customer Support

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

    The link in the original topic goes to error404.

    #2144712
    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 🙂

    #2144850
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.