[Resolved] Smooth Scroll In Flexbox + External CSS File

Home Forums Support Smooth Scroll In Flexbox + External CSS File

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1460310
    Ian

    So inside Customizer, I have set Dynamic CSS to External File, Structure = Flexbox, Smooth Scroll = On. Pretty sure smooth scroll worked with this on a previous site. Working on a dev site now and it jumps using #anchor links. Any ideas on how to troubleshoot this? I have added the smooth-scroll class to the button block and still no smooth scrolling. Thanks!

    #1460353
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site where we can see the issue ?

    #1460370
    Ian

    Hey David, info added.

    I think the issue may be that I am using GB Buttons and they have a class. Any ideas how to keep the button class as it’s themed out and enable smooth scrolling? TIA!

    #1460764
    David
    Staff
    Customer Support

    Select the individual GB Button and in its Settings > Advanced add the CSS class of smooth-scroll

    Or alternatively you can enable smooth-scroll on all anchor elements:

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

    #1461424
    Ian

    Hey David, I have added that chunk to functions.php. Still no smooth scrolling on the button anchor links. Can you take a look? Info provided in the first post. Thanks.

    #1461811
    David
    Staff
    Customer Support

    Doesn’t look that function is being applied.

    Can you try adding the Class to the Button ?

    #1462106
    Ian

    Hey David,

    I have checked and indeed this is inside functions.php of the Child theme:

    add_filter( ‘generate_smooth_scroll_elements’, function( $elements ) {
    $elements[] = ‘a[href*=”#”]’;

    return $elements;
    } );

    Also swapped Button > Advacned > css from “button” to “smooth-scroll”.

    Does smooth-scroll need to be added into the styles.css?

    #1462882
    Tom
    Lead Developer
    Lead Developer

    Strange, everything looks like it’s set up correctly.

    Is there anything else on the site that would be trying to provide some sort of smooth scroll functionality? Any chance you can temporarily deactivate other plugins to check for a conflict?

    #1462903
    Ian

    Sure thing. Just did that and left only BG and GPP as the buttons were nested inside an Block Element. No Smooth scrolling on # links but the default back to top menu had smooth scrolling if that helps.

    Odd indeed.

    #1464112
    Tom
    Lead Developer
    Lead Developer

    Does a regular link in your content work with smooth scrolling if you add the smooth-scroll class to it?

    #1464278
    Ian

    Good idea. I created a GB Headline block at the top of the page, added smooth-scroll as a class for the block. The created an anchor # link inside the the Headline block and pointed it to the bottom of the page. No smooth scrolling. Did I set it properly to do the test?

    #1464622
    Elvin
    Customer Support

    Hi,

    Adding smooth-scroll class on a GB Headline with a hyperlink won’t work because the class field adds the smooth-scroll on the heading element rather than the <a> element inside it.

    However, it will work for GB Buttons as the smooth-scroll class is directly added to the <a> element.

    That said, we can still do a workaround for GB Headline with links.

    You can add the smooth-scroll class to the <a> element inside the GB headline by going back to the Gutenberg editor and edit the contents in Code Editor mode.

    To go into Code Editor mode, you can use the shortcut key CTRL + SHIFT + ALT + M. Or you can click the “more option”(3 vertical dots) icon right beside the gear icon and select “Code Editor” from the dropdown.
    https://share.getcloudapp.com/ApuL1Ge7

    Once selected mode is active, you can see and edit the contents in code form.
    Example: https://share.getcloudapp.com/E0urd4JJ

    Look for your GB headline with a link‘s code and add class="smooth-scroll" to its <a> element. That should apply the smooth scroll you want to achieve.

    A wise man once said:
    "Have you cleared your cache?"

    #1464745
    Ian

    Hi Elvin,

    Thanks for the info. I don’t actually need the smooth scroll in the Headline block. I am trying to get the buttons to smooth scroll and that did not work so Tom suggested I try it with a regular link.

    Any ideas on why the buttons with a “button” class is not smooth scrolling? Feel free to use the creds in the original post. The dev site will be up for another day or so before we go live. Thx.

    #1464947
    David
    Staff
    Customer Support

    Can you try using a HTML Block with the link that way?

    e.g.

    <a class="smooth-scroll" href="#your-link-here">Test link</a>

    #1465693
    Ian

    Hey David,

    I used HTML blocks to build the link you provided as well as the anchored lcoation. No Smooth Scrolling. Clicking on the link jumped to the destination. Tested in Chrome and Edge.

    Any other ideas on how to get smooth scrolling to work?

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.