[Resolved] smooth scroll // how to

[Sebastien]

Hi,

Smooth Scroll doesn’t work into my website.. =/
I’ve writen some anchors along my front page. Then I’ve writen some link to point to these anchor:
<a class="smooth-scroll" href="#application">My Section</a>

When I click into the link, it links me to the right anchor #application, but there is no any smooth scroll effect =/
I’ve also add:

add_filter( 'generate_smooth_scroll_duration', 'tu_smooth_scroll_duration' );
function tu_smooth_scroll_duration() {
    return 800; // milliseconds
}

but that doesn’t work.. Any idea?
thanks

[David]

Hi there,

have you activated the smooth scroll option in Customizer > General ?

[Sebastien]

Yes I have already activated this option

[David]

Clicking the Section link is working for me. Maybe try clearing the browser cache.

[Sebastien]

I’ve noticed it also work with smartphone devices… but neither with my desktop Chrome or Firefox after full cleared…
humm strange..

[David]

Working fine for me on all browsers – any browser extensions that could be conflicting ?

[Marcel]

Hello. Related to the smooth scroll behaviour:
– If I apply smooth scroll to regular links (https://docs.generatepress.com/article/smooth-scroll/#regular-links), all is good to go, it works as expected, but…
– I tried to apply the smooth-scroll class to a headine on GenerateBlocks. The behaviour changes and the anchor link sends me under the Element ID. Is it a trick here?
I made a short VIDEO HERE to explain better.
Thank you for your support.
Marcel

[Tom]

Ah, the custom class option in GenerateBlocks adds the class to the headline element, not the anchor.

Try adding this filter:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
    $elements[] = '.gb-headline.smooth-scroll a';

    return $elements;
} );

Let me know 🙂

[Marcel]

Tom, thank you very much for the solution. It is working properly now!

[Tom]

Glad I could help 🙂

[Adam]

Hi there,

Where should that filter code be placed? I just tried to place it in my “Code Snippets” plugin to activate it and enable the headline text to be scrolled down to upon clicking a button with the anchor, but it’s still moving down to the point on the page without smooth scroll.

[David]

Hi there,

the Code Snippets plugins is correct to use.
Have you selected the Headline Block and in Advanced > Additional CSS Class(es) added: smooth-scroll ?

[Author]

Posts