Anchor links not working on Safari

On 9/29/2023 at 7:01 AM, hollykmsmith said:

@tuanphan are you able to elaborate on your above code shared by @morenothing? How does it actually work? I'm still in the dark as to what the actual issue is and why the anchor links aren't working in the first place.

Have you tried adding it yet? I see it works on some sites (add code to Code Injection > Footer)

To anyone having issues with this who cannot add code through the Code Injection due to being on a personal plan:

Make sure that you add the code posted above by @tuanphan and others into a Markdown Block in the footer of your site. This needs to be in the footer, and not in any other part of your page. I think this is because it needs to exist on all pages of your site to work correctly.

I tried adding the Markdown Block to the home page originally, but this didn't work. So place it in the footer, but don't worry about where in the footer, as it won't be visible.

Hi there, 

For anyone having problems with this, I created a solution for a client's website and mine. 

Whilst I am testing out the effectiveness of the installation guide this December (2023), I'm offering a 15% discount for testers. You can check it out here:

https://www.maryphilip.com/squarespace-code-shop/p/fix-anchor-link-issue-mobile-squarespace

Discount code: THANKSTESTER for 15% off.

🙂 

On Square Space 7.1 - fixed for me after no end of issues between ipad iphone and safari and chrome  on mac being horrible - anchors always taking to bottom of page or just not working , anchors getting covered up etc - this fixed it for me - you can tweak the values of top: to suit - 

making anchor like 

<div>&nbsp;</div>
<a class="anchor" id="sanctuary"></a>

I put a div before mine - that may help  not sure if needed

then in site wide custom css :

/* -- Place this near the top of the Custom CSS area -- */

@supports (-webkit-touch-callout: none) {
.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}


html {
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
}
}

@supports not (-webkit-touch-callout: none) { .anchor {
    display: block;
    position: relative;
    top: -30px;
    visibility: hidden;
  /* CSS for other than iOS devices */ 
}
}