[Support request] Smooth Scroll not working and still over shot

[Atefan]

Hi,

Im aware about Smooth Scoll

But it is not working for me and the jump goes too far, I guess if generatepress smooth scrolling would work it should not do this.

[David]

Hi there,

you need to add the smooth-scroll class to the <a> element.
I don’t thats possible via the Additional CSS Classes field in the Block editor for a List item.
So you would need to either switch to the Code View and change the HTML like so:

<a class="smooth-scroll" href="#Retirement-Visa">Retirement Visa</a>

OR

make all links automatically use smooth-scroll ( if applicable ) by adding the PHP Snippet provided here:

https://docs.generatepress.com/article/generate_smooth_scroll_elements/

[Atefan]

David, this works very nicely with the PHP solution.

but what is the difference to css?

you say:
make all links automatically use smooth-scroll ( if applicable )

to my understanding, the smooth scroll will work only for anchor links, where else it will smooth scroll? and is there a down site using PHP?

Thank you

[David]

By default the smooth-scroll uses a javascript event listener that only listens for clicks on <a> elements that have the smooth-scroll class.

The PHP Snippet changes the listened for element to any <a> elements whose href includes # ie. any Anchor Links.

It won’t make any noticeable difference to performance.

The only thing to be aware of is if there are other plugins / custom functions that also listen for click events on anchor links. We have never had any reported issues but there is a slight possibility that there could be a conflict.

[Atefan]

thank you for the explanation, this helps!
and make me sleep better 😉

[Atefan]

I guess I find a conflict,
with my floating button.

 echo ' <div class="fcb-header"><a href="#" class="close-fcb-modal">

now it jumps up with a button to the top and down with the floating button.
any idea how I could avoid this? apart css

[David]

In the PHP Snippet you can change this line:

$elements[] = 'a[href*="#"]';

For example if you changed it to:

$elements[] = 'li a[href*="#"]';

Then it would only listen for links inside a list element.

Or you could specifically exclude the close-fcb-modal class:

$elements[] = 'a[href*="#"]:not(.close-fcb-modal)';

[Atefan]

Thanks, David

$elements[] = 'li a[href*="#"]';

This works, but I guess the limit is that it works only on the list.
what is if I have a text anchor link or a button as a link anchor.

the second option, where I would need to add this class than,
close-fcb-modal

to the list or link or button?

the code has more than, one class, in all 3 times i see.
<a href="#fcb-modal" class="fcb-link-button">
<a href="#" class="close-fcb-modal">
and

#fcb-modal input[type=\"submit\"]:hover {
		    border: 1px solid {$color} !important;
	        background-color: {$color} !important;
		}";

[Ying]

The second option is to to replace $elements[] = 'li a[href*="#"]';with $elements[] = 'a[href*="#"]:not(.close-fcb-modal)';

So the PHP snippet would become like this:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'a[href*="#"]:not(.close-fcb-modal)';
  
  return $elements;
} );

Let me know 🙂

[Atefan]

I use,

Davids code $elements[] = 'li a[href*="#"]';

For the moment it is ok and i have little time, but Thank You!

[Author]

Posts