Issues with screen position returned using an anchor link

[sloemoe]

Hello. I’ve been assigning anchor links throughout my site for better navigation. My goal is to basically link subject matter in my site to headlines covering that topic in FAQ. The result being if a user is on my site, has a question, they click the anchor link and go directly to information they need.

The links work but the headlines that are linked are off screen. Here is a screen shot of the Headline (ID: #faq-methodology) that should be returned on screen when the anchor link is clicked (“Methodology”) Shot 1 of 2:

When I click the link, however, it looks like this:

[tristup]

Hi @sloemoe,

Thanks for reaching out.
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 - 120;
} );

Hope it helps.
Thanks

[sloemoe]

I’m sorry I can’t find a theme option for JS (Javascript?). Are you referring to the topbar content area under “Headers”?

[marc_a]

Hi @sloemoe,

To find the theme option, please see the following screenshots.

1. ) Go to the Cornerstone in the left panel of the dashboard and hover it to see the theme options.

2.) Click the theme options and then you will see the JS tab,

Hope that helps.

[sloemoe]

Thank you. That works. However, I would be interested in learning why this is happening in the first place. Can you tell me anything about any settings or issues that would cause this? My assumption is that an anchor link would appear at the top of a page and not be be hidden by default - is that true? Thanks again for your help.

[tristup]

Hi @sloemoe,

It’s due to the offset calculation while using the Sticky Bar and the One Page navigation. 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.

Thanks