[Resolved] Smooth-scroll does not work

[Jacob]

Hi, I have activated smooth-scroll in Appearance>customize>general

However, when I add an anchor and link to parts of my page with #. The smooth-scroll does not work. I have inserted “smooth-scroll” in Additional CSS class(es) for the anchors. But it is not smooth when I try.

Why does it not work? Thanks

[Elvin]

Hi Jacob,

Can you link us to the page in question? To inspect the page to have clues as to why smooth scroll doesn’t work.

You can use the private information text field to provide details. 😀

[Jacob]

Hey, I just tried to purge cache but it did not work anyway. Thanks.

[Elvin]

Ah I see,

You use a custom element that isn’t included on the smoothscroll script yet.

You’ll have to filter it in to include it.

Here’s an example PHP snippet:

add_filter( 'generate_smooth_scroll_elements', function($elements){
$elements = array( '.smooth-scroll', 'li.smooth-scroll a', '.smooth-scroll li a' );
return $elements;
},20,1);

[Jacob]

Thanks Elvin, it worked!
But what do you mean with “custom elements” I just installed GP on my site. No customizations or nothing has been done. Is that something that came with the theme from the Site library that I imported?

[Ying]

Hi Jacob,

By default, smooth scroll only works with a.smooth-scroll which means the smooth-scroll class needs to be added to a link element.

As you can see, eg. you added smooth-scroll to the ol element, not a element:
https://www.screencast.com/t/DxqHRBH9d

So it won’t work by defualt.

The snippet Elvin provided includes this kind of situation into the smooth-scroll function.

Hope I made it clear 🙂

[Jacob]

Hi Ying, Thanks for great service. You should update the video on your site where the guy explains how to use smooth-scroll without mentioning that a snoippet must be added to the code. Thanks for your help!

[Ying]

You are welcome Jacob!

In that tutorial video we use the buttonsblock from Generateblocks which adds the class to the a element perfectely.

So in most cases, we don’t need to use the snippet.

In order not to confuse our users from the beginning, we prefer having the problem sorted in the support forum 🙂

[Author]

Posts