Anchor Links Issue

[vlntnt]

Hi, I have issues with the anchor links

Bespoke Skin, Laser, Body & Injectable Treatments - Nova Aesthetic Clinic...

I have 4 buttons at the top of the page each of it pointing at the relevant section, but when you click on them they lead to the wrong location. For example if you click “Laser” button, about 75% of the section gets hidden.

Once the button is clicked if you go back to the top, and click it again, it goes to a different location (this time shows almost the entire section, just hides the headline)

I’ve tried to switch the ID from the section to the actual “Laser” headline, the problem still occurs, and again it goes to the same exact place.

[tristup]

Hi @vlntnt,

Thanks for reaching out.
It might be due to the Scrolling Offest, you need to add the following custom JavaScript code into the Theme Options > JS.

window.csGlobal.csHooks.filter('hash_scrolling_offset', (offset) => {
    return offset - 120;
} );

Thanks

[vlntnt]

I’ve done that, nothing happens.

Can you please get in, and check.

[tristup]

Hi @vlntnt,

I have added the code and found it is working fine and showing the content properly. If that is not the case and you are trying to point out something else, please provide any screenshot marked with the problem or any video that helps us to recognize the problem.

Thanks

[vlntnt]

Here is a link: https://www.veed.io/view/50e59738-c876-43be-8ec6-fdf78bec94f1

[tristup]

Hi @vlntnt,

I have checked it again and found that it start working once it loaded the full page. I discuss the same with my colleague Rad and found that content in the columns are having different heights in different rows and it creates the problem. Once it is completely loaded the code starts working. The solution is setting uniform heights to all the columns that are applicable while loading and when completed loading.

Hope it helps.
Thanks

[vlntnt]

But how can I do that without breaking the layout of the page? Sections are divided by treatment category, and they do have different amount of treatments, which automatically makes them different length

[marc_a]

Hey @vlntnt,

I check your treatment and the anchor link to the specific page is just working fine. As my colleague said, you need to wait to fully load the page before you click the links so that the script will work properly.

Making the column uniform while loading will require customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail Elite where they do the customization.

Thank you for understanding.

[vlntnt]

While I get your point, I’m not just asking for a cosmetic customisation that I don’t know how to do, but I do actually experience a problem with the theme, so doesn’t it make sense the solution to be provided by you?

[christian]

Hey @vlntnt,

We’re sorry for the lack of details here.

My colleague provided a workaround code because he recognized the issue with the offset. It happens if there’s a Sticky Bar with the Position of Relative. The code he provided sets the Sticky Bar Offset manually. If the Sticky Bar is set to Absolute Position, the offset will work and the code is not needed. It’s not applicable for your case though as you have another Bar below the Sticky Bar so that is why the code is needed.

Now as to why the issue is still happening even after adding the code. That is because something in your content is dynamically loaded so it messes up with the sticky bar position calculation. It’s not because you have to wait for the page to fully load. It’s because something in your content will load only if you have scrolled to the area where the dynamic content is. Please watch the video below closely and you’ll see that the offset works if you have scrolled through all the contents from the header to the footer.

2022 06 16 23h52 28

With that said, there is an issue with our theme if the Sticky Bar is Relative Position. But, there is also an issue or a conflict with your content being dynamically loaded which messes up our theme’s sticky bar calculation.

What that dynamic content is, we don’t know. It could be lazy loaded images or content loaded using Javascript.

The ulitmate test you can do is save your page as a template using the Template Manager then load your page template in a test page. In the test page, remove sections 1 by 1 while testing the jump link offset each time. The last section you remove that makes the jump link offset work is the culprit. You must not use it in your page.

It would also help, if you disable ALL 3rd party plugins (including optimization plugins that use lazy loading) while testing. If you can’t do that since your site is live, copy your site to a staging server then do all the test in staging.

To summarize, there are 2 factors causing the issue:

1. a possible bug in our theme (theme issue)
2. dynamically loaded content (not a theme issue and this one you should find and fix)

Thanks.

[vlntnt]

Appreciate your response. Makes sense now, it was indeed the lazy loading, I’ll try to find a solution for it, or just stop it altogether on that page. Thank you.

[tristup]

Hi @vlntnt,

You are most welcome.