Jump to content

Anchor links not scrolling to correct position on mobile

Recommended Posts

Posted

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!

  • Replies 5
  • Views 3.2k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
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!

image.thumb.png.bf15e845cf5b5e6cc882e35d8d426974.png

image.thumb.png.b589ba8a3fc9bd0b42ba800ed0f4165f.png 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted
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!

image.thumb.png.bf15e845cf5b5e6cc882e35d8d426974.png

image.thumb.png.b589ba8a3fc9bd0b42ba800ed0f4165f.png 

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.

 

Posted
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!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted
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. 

Posted
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.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.