Anchor tag offset

Design help General
1

[ 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)

2

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

Thank you,
Mike

3

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
4

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

5

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

6

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!

7

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

8

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

9

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
10

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

11

Did this ever get solved?? Trying to get an exact anchor stop.

12

I’ve had this issue quite a few times with my navbars, and it seems like a bunch of you have too, so I just released this (free) solution here - comes with a video tutorial, script, and cloneable.

Basically, it will calculate your nav height on any screen size + whatever offset you give it, and then anchor links will scroll with that offset. So, no more content hiding behind your navbar!

Here’s a link to the tutorial & code :)

Hope this helps someone!!

1 Like
13

@Julian_Galluzzo Thank you! This helped me with one of my projects. So I tried it on another project that has a page full of lazy load images and it’s not working on that one. I noticed the navbar in your example isn’t first in the body (as is recommended in some other discussion on this topic), which is similar to the structure I have in the one I’m trying to solve. Suggestions? Here’s a link: Webflow - Originalia web site