[Resolved] Smooth Scroll by default without adding class

Home Forums Support [Resolved] Smooth Scroll by default without adding class

Home Forums Support Smooth Scroll by default without adding class

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

    #1605109
    David
    Staff
    Customer Support

    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/

    #1605949
    Dennis

    Thank you, this works perfectly!

    #1606255
    David
    Staff
    Customer Support
    #1620235
    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!

    #1620373
    David
    Staff
    Customer Support

    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;
    } );  
    #1620528
    Dennis

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

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