- This topic has 17 replies, 4 voices, and was last updated 3 years, 7 months ago by
.
-
Posts
-
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!
Customer Support
Hi there,
can you share a link to the site where we can see the issue ?
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!
Select the individual GB Button and in its Settings > Advanced add the CSS class of
smooth-scrollOr alternatively you can enable smooth-scroll on all anchor elements:
https://docs.generatepress.com/article/generate_smooth_scroll_elements/
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.
Doesn’t look that function is being applied.
Can you try adding the Class to the Button ?
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?
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?
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.
Does a regular link in your content work with smooth scrolling if you add the
smooth-scrollclass to it?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?
Customer Support
Hi,
Adding
smooth-scrollclass on a GB Headline with a hyperlink won’t work because the class field adds thesmooth-scrollon the heading element rather than the<a>element inside it.However, it will work for GB Buttons as the
smooth-scrollclass 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-scrollclass 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/ApuL1Ge7Once selected mode is active, you can see and edit the contents in code form.
Example: https://share.getcloudapp.com/E0urd4JJLook 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.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.
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>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?
- You must be logged in to reply to this topic.