Anchor links not scrolling to correct position on mobile

Hi! Wondering if anyone is having the same issue or can help me solve.

I have anchor links set up on all my main navigation pages, and they work great on desktop.

For each anchor link, I have a code block with an #id that I place a little further above the section header so the position it scrolls to isn't thrown off by the header. On mobile, this doesn't seem to work all the time. The links still scroll, but no matter where I place the anchor link blocks, there doesn't seem to be a rhyme or reason to the exact position they scroll to. It's in the general area I want it but the spacing is not consistent.

For example, on the /visit page on mobile, the code block containing the #id for the first anchor link "public hours" is placed behind the orange box and scrolls down midway the image to display the heading "public hours". This block is positioned 4 rows above where I want it to land and it works great like all the desktop ones. However the "entrances" code block containing the #id is also positioned 4 rows above the heading "entrances," yet the scroll position lands further down than expected. These blocks are identical size on mobile and are both code blocks with identical span tags (other than the #id of course). If I move the id block for entrances up a couple rows thinking that would be the simple fix, it doesn't change where it lands. I'm not quite sure what the issue here is. Does anyone else notice these inconsistencies with the scroll-to position for anchor links on mobile, or am I missing something?

Happy to explain further if my description of the issue isn't clear enough.

I use an iPhone. Site url: https://www.buildingbok.com/visit

Thanks in advance for any help!

3 hours ago, heatherjacksonio said:

On mobile, this doesn't seem to work all the time. The links still scroll, but no matter where I place the anchor link blocks, there doesn't seem to be a rhyme or reason to the exact position they scroll to. It's in the general area I want it but the spacing is not consistent.

Hi @heatherjacksonio have you tried going into mobile edit mode to place the anchor links? They seem to be placed really far above their respective headings, which explains the behaviour you are seeing.

For "hours" and "entrances", the distance from the code block to the heading are placed at different distances.

Hope this helps!

On 3/22/2024 at 8:24 PM, melody495 said:

Hi @heatherjacksonio have you tried going into mobile edit mode to place the anchor links? They seem to be placed really far above their respective headings, which explains the behaviour you are seeing.

For "hours" and "entrances", the distance from the code block to the heading are placed at different distances.

Hope this helps!

 

Hi @melody495 thank you so much for replying! So actually all of the code blocks containing the anchor links are intentionally placed on mobile. I have moved them up and down on mobile trying to get my anchor links to scroll to the correct spot. I do, in fact, want them to scroll to the headings, but no matter where I place the code blocks I can't seem to get it to adjust. Like in your screenshot, I've placed the span for entrances up above, behind that paragraph text, yet it still brings you down passed the heading to the map. I've moved it up higher and even down lower, but it seems to jump to the exact same position, which I find strange.

This issue is specifically happening on iPhones.

23 hours ago, heatherjacksonio said:

I do, in fact, want them to scroll to the headings, but no matter where I place the code blocks I can't seem to get it to adjust.

Can you pretend it's all working as they should, and place the anchor links where you'd like them to scroll to in mobile mode? And I can check to see what's going on.

At the moment they're placed at weird places, so it's more difficult to diagnose what the issue is.

Let me know when you've done that!

On 3/26/2024 at 2:07 PM, melody495 said:

Can you pretend it's all working as they should, and place the anchor links where you'd like them to scroll to in mobile mode? And I can check to see what's going on.

At the moment they're placed at weird places, so it's more difficult to diagnose what the issue is.

Let me know when you've done that!

Ok, I've placed each anchor link with the corresponding heading I'd like it to scroll to. 

On 3/28/2024 at 6:23 PM, heatherjacksonio said:

Ok, I've placed each anchor link with the corresponding heading I'd like it to scroll to. 

Good news - they are behaving as expected! 

The issue is that you have a fixed header, so when it is scrolling to the anchor link, the placement of the anchor link is at the top of the screen, which is behind the header. That's why it works when you position the anchor link a distance above your title in desktop.

You have two options:

1) place the anchor links for mobile a bit higher than the title, similar to what you've done for your desktop version

or

2) use this code so that the ancho links scroll to position plus margin from the top, adjust the number to suit your fixed header height. If you do this, you'll have to re-position the anchor links on desktop view, so that they are directly where your titles are.

html {
    scroll-padding-top: 8vw!important;
  }

Hope this helps.