Hi all - I created an anchor link on blog post page above a section header. Since it’s a CMS page, I used the custom code option and followed this documentation.
I can see the anchor ID while inspecting the page on the live site and I have the ID in the URL (#code-review), but it doesn’t work. I haven’t found anyone else with this problem and I’m perplexed since this works flawlessly on other platforms.
I do see webflow is automatically embedding my custom code snippte within a <div class=“w-embed”'>, so maybe that’s breaking it? I can’t seem to get rid of it, since that’s not in my embed code snippet. Screenshot attached with the relevant pieces circled in red.
Here’s the link the blog post on our site with the anchor in the URL for reference:
Adding to Vincent’s suggestion, if that alone does not work I’m seeing two additional issues.
The .w-condition-invisible class on your rich text element seems to be confusing the browser’s ability to locate element position. I haven’t looked deeper into the styles as to why, but I suspect it’s causing the browser to calculate a 0,0 position for the sub-elements.
When that’s removed, anchor scrolling works, but something (else) is causing the page to scroll back to top afterwards.
This variation works by introducing a lengthy delay.
You have a lot happening with hotjar, GTM, refokus RTE and some other scripts.
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(() => {
const hash = location.hash;
if (hash) {
const element = document.querySelector(hash);
if (element) {
element.scrollIntoView();
}
}
}, 1500); // 1.5 sec, might need to increase...
});
</script>
Thank you Vincent and Michael for your assistance! I was missing the custom script code in the page head, but as Michael noted, there’s something with the class “w-condition-invisible” that’s causing trouble.
I found this discourse thread which touches on the class, but didn’t get anything useful out of it. I think for now I’m stuck.
