[Resolved] Smooth Scroll by default without adding class

[Dennis]

Hello,

I found out how to use Smooth Scroll GP, but I think there should also be an option without having to add a class to each anchor link, since for my editors it would be needed to edit the code in Gutenberg for links within a paragraph for example, which is the case for most cases.

What do you think?

Thanks,
Dennis

[David]

Hi there

you can enable smooth scroll on all link elements with the PHP Snippet provided here:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dennis]

Thank you, this works perfectly!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dennis]

Hey again.

I noticed a small issue with this example. Sometimes href=”#” is used for links with only javascript actions.
So I would like to extend the regex from the example: a[href*=”#”]

How would this look, if after the #, there needs to be at least a letter. I do not really understand what syntax this is. Could you give me a hint here? In regex it would be something like .+
But why is there href*= anyways?

Thanks for your great help!

[David]

The *= is a CSS wildcard selector. What it means is find me a href that contains a string in this case: # character.
Unfortunately theres not a wild card that selects any old character in the string.

If all your links started with the same letter/string for example they were #section-X then you could use:

a[href*="#s"]

Geeky info here:
http://www.w3.org/TR/selectors/#attribute-substrings

Alternatively if you can change the selector be more specific, and you could add multiple selectors to that filter:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'p > a[href*="#"]'; /* Only target A if direct child of P */
  $elements[] = '.page-hero a[href*="#"]'; /* Target A if is inside the page-hero */
  
  return $elements;
} );  

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dennis]

wow nice. Thanks again for your help. This solves our issue.

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts