I am creating a site using SP Page Builder and Joomla 4.0. I have several anchor links on my website and they work well in Firefox, but they overshoot in Chorme and Safari. Here's an example:
https://laurens24.sg-host.com/index.php/things-to-do#history
Is there a way to fix this issue?
Hi there!
Sorry for your experience.
Did you mean the speed of scroll? You may try the following code to your custom CSS to see if it works for you:
*{scroll-behavior: smooth !important;}
Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
However, please check the following doc also:
https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/customization-tips#how-to-add-smooth-scrolling
Best Regards
Thank you for getting back to me so quickly. Actually, I don't mean the speed of the scroll, but rather that it is scrolling past the anchor link when viewing in Chrome and Safari. In Firefox it is fine. If you look at this link:
https://laurens24.sg-host.com/index.php/things-to-do#history
The anchor link has been placed just above the heading "History". That should be showing, but instead it is scrolling past this heading.
Hi,
You're welcome.
I have checked with chrome and it's looking fine at my end. Can you clear your browser cache and then share a screencast, please?
Best Regards
Hello Rashida,
I can confirm this. The anchor tag seems to ignore the heading and moves straight to the text block.
(You can view 4 of these examples on the front page of vbci.org - click any of the orange "More Information" buttons.)
Another way to think of it is that the heading gets buried under the sticky menu, maybe?
Have cleared cache and checked with Chrome, Firefox, Edge and Brave browsers.
Thank you for your help.
I am not sure what #lsellers is meaning when he says "the anchor tag has been placed just above the heading "History"", as for me i am adding the anchor in the Section Settings > Section ID box.
I would assume that puts the anchor tag at the top of everything in the section though.
Joomla 5.1.1
PHP 8.1
latest SPPBP
HelixUltimate Template
joomshaper - please comment. thank you.
Same issue here. PLease come with a respons or better, a fix!
Wait..... Can it be the sticky header?
... Yep, is classic sticky-header issue. Solution is to add toi custom.css:
[id] {
scroll-margin-top: var(--header-height, 80px);
}
