Anchor tag offset


[ I see that this is a know issue or problem. ]
When clicked, my anchor links are scrolling way past the indented element.
Trying to find the simplest solution to fix it.
I unchecked these boxes but doesn’t help.

Any custom code or attribute I can plug in to fix the offset?
Thanks!!
Joe
Loom
Share link:
https://preview.webflow.com/preview/imd-2021-e2206ebea881bbeeb0848b5c935253?utm_medium=preview_link&utm_source=designer&utm_content=imd-2021-e2206ebea881bbeeb0848b5c935253&preview=2a64036329c564b472d2765c24a84f2f&pageId=60ef56b0574442e81bddb77b&workflow=preview
Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi, did you ever find a solution to this issue?

Thank you,
Mike

Hi @mhyusi,

You could try setting your all the images on the page to Load: Eager - it’s possible that lazy loading is leading the offset.

Hope this helps - if not, send through a read-only link and I’ll have a look!

1 Like

Thank you so much for reaching out, my client is going crazy over this. Any help is appreciated.

Mike

https://preview.webflow.com/preview/paw-patrol-hub?utm_medium=preview_link&utm_source=designer&utm_content=paw-patrol-hub&preview=9e7aabb3f19e98cfade666279c23f409&workflow=preview

The images I’m trying to link to are the headers “Bedding” etc., but I used an app for the image hotspots on the products that load below those, and I’m thinking that might be the issue as well.

Again, any help is appreciated.

Mike

Hi @mhyusi,

The issue is stemming from your navbar being set to position: sticky, here’s a demo: Screen Recording 2022-05-23...

I’d recommend checking out this post: Sticky Nav not working with in-page linking - #2 by vincent

You can also see in the recording that the first time I tried it didn’t work properly, that is related to the image load - you can set to load: eager to fix this issue.

Hope this helps!

Thank you for that, and I’ve given it a try, however, they want the header and navigation to stay visible, and I think that’s where my issue is. Any ideas on that?

Thank you,
Mike

Milan,
Thanks again for the help. i’ve changed the nav to Fixed, but the targeting on the anchors is still off, any other ideas?
Thank you,
Mike

Hi @mhyusi,

I’d definitely try setting the images to Load: Eager - here’s a quick demo on that: Screen Recording 2022-05-26...

I think it’s most likely caused by the scripts (HTML embeds) loading on that page. They take some time to load and they take up quite a lot of space.

Sorry, I wish I had an exact solution for you!

1 Like

Hi Milan,

I’ve changed the Top Sellers page away from the HTML embeds, and created images with div links on top, but I’m still having the issue of missing the anchor point. Can you take a look and let me know if you see anything obvious before I change all of the images and links on the Shop All page?

Thank you,
Mike

https://preview.webflow.com/preview/paw-patrol-hub?utm_medium=preview_link&utm_source=designer&utm_content=paw-patrol-hub&preview=9e7aabb3f19e98cfade666279c23f409&workflow=preview