In-page Anchor Link Scrolled too Far and Now Doesn't Work at All

[Seppanen]

On the following page, I added anchors at the beginning of two of its sections and then added links to them near the top of the page:

Newsletter Archives | Word-n-Will

Initially, the links worked but scrolled too far. I tried two of the JQuery suggestions that I found on this forum concerning this problem but neither of them resolved the problem. However, now the anchor links on this page do not work at all. I know next to nothing about adding JavaScript so I assume I messed something up.

Thanks for any help you can provide.

[tristup]

Hi Seth,

Thanks for reaching out.
I have checked the given page URL and found two different links with the # one is May_2022 and another one is December_2021. But didn’t find the corresponding element that is assigned with those ids, which means when the links are clicked it didn’t find any section that consists of the id of May_2022 or December_2021. You need to add the specific ids to the specific section to get the desired result.

Hope it helps.
Thanks

[Seppanen]

Thanks! After I added the anchor id and the link, I reorganized the page and must have inadvertently deleted the ids. I’ve now added the ids and now the link works, but it scrolls too far. I could put the id a few lines above where I want it to scroll to, but I was hoping there was a better resolution to the problem.

[prakash_s]

Hello Seth,

Please add the following code to the Theme Options > JS and check if that resolves your issue.

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

It’s due to the offset calculation while using the Sticky Bar. So, it needs to be adjusted using that JavaScript code. It has been already reported to our tracker for further investigation by our development team.

Hope it helps.
Thanks

[Seppanen]

When I access Theme Options, I don’t see a JS section. However, on the menu bar that has the breakpoint icons there is a JS button. Do I just click that button and paste the code into Global JS box? Do I have to click Run after I paste the code into the box?

[prakash_s]

Hello Seth,

You need to go to Theme Options —>JS. You can paste the given code and then click on the save button. Please have a look at the given screenshot below.

You don’t need to click on the Run after pasting the code.

Hope it helps
Thanks

[Seppanen]

I added the script to Theme Options > JS. The problem is now resolved when I access the website within WordPress. However, when I accessed the website by opening another browser, it still scrolled too far. I then cleared the browsers cache, but this did not resolve the problem. Is the problem resolved if you access the page?

[ruenel]

Hello Seth,

Deduct 32 pixels to the offset code because the WordPress Admin Bar height is just 32 pixels. Therefore, you may need to update the code into:

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

Kindly let us know how it goes.

[Seppanen]

Thanks! It now works correctly. I really appreciate your help.

[prakash_s]

Hello Seth,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns regarding our theme and theme settings.

Thanks