Jump to content

Anchor links not working on Safari

By Saasmic, in Customize with code

Recommended Posts

tuanphan Level 17

tuanphan

Posted
Posted
On 8/31/2023 at 7:56 PM, MarkScott said:

I have put the following id attribute in  the footer of the website (https://sweetdreamslittleones.co.uk😞

<html>
<head>
<style>
h3 {text-align: center;}
</style>
</head>
<body>
<p id="15MIN"><h3>Request a free 30 minute call:</h3></p>
</body>
</html>

This is so that whenever anybody clicks on a "Request a free 30 minute call button" throughout the site, they will be taken to the footer.

The client also sends out the following link in her emails:  https://sweetdreamslittleones.co.uk/home#15MIN
 

This is so that the client can be taken directly to the footer to request a free call.

This link and the p id attribute work perfectly in chrome, but they have stopped working on iOS devices.  Does anyone know why this is, and if there is an easy way to resolve this problem?

Thanks

Change your id. Don't start ID with a number, you can change to something like this p id="min15"

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 53
  • Views 12.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

You can edit Site Footer > Add a Markdown Block > Use this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document)

Saasmic
Saasmic

Hey there! I've been trying to use anchor links following this tutorial --> https://support.squarespace.com/hc/en-us/articles/207135178?utm_source=chatbot#toc-limitations-and-best-practices

Miguel30
Miguel30

I can report the same issue, anchor link as described by Squarespace does not work cross site, eg. Clicking anchor URL on page 1 will only jump user to page 2 but not to the anchor point on page 2, ju

Posted Images

fkbuilders Level 1

fkbuilders

Posted
Posted

Can someone from squarespace please explain to me why this is a safari problem and not a squarespace problem? Because I decided to deploy a azure static web app for a quick test and anchor 'jump' links work perfectly fine in safari, squarespace / safari bug test (witty-rock-003f16910.3.azurestaticapps.net

This issue needs to be addressed. I decided to move our hosting over to squarespace after the acquisition of google domains and very disappointed that the majority of our website visitors are experiencing a broken anchor tag.

...And yes I am using the full link 'https://www.fkbuildersllc.com/home/#contact' for the button. Why does it have to be full link anyways on squarespace? It has to do a full page reload and is annoying. 

Link to comment
victory_over_all Level 5

victory_over_all

Posted
Posted (edited)

I'm having an issue with anchor links on the following site: https://carolechevalier.co.uk

On the site linked above, there are links in the Services section which link to particular sections of the English and French Services pages.

These links work as intended when testing in the following browsers:
✅ Chrome and Firefox on desktop (macOS)
✅ Chrome on Android 

But they don't work in the following browsers, instead they send the user to the top of the linked page:
❌ Safari on desktop (macOS)
❌ Chrome and Safari on iPad

The template used is Brine, I've turned off Ajax loading through the site styles, the sections I'm linking to are sections within index pages so I'm using their unique id as recommended by Squarespace, "www." prefix has been turned off and I've made sure that the URLs don't include the "www.", and the URLs have a / between the page slug and the #.

I've tried a few different ways of writing the URLs, and I've tried using simple code blocks with an empty div and giving that an id instead of using the section id, but each time the result is the same: Works in some browsers, but not in others.

Anybody found a fix or workaround yet? I've searched, but a lot of the solutions use code injection, which I can't do as the site is on a Personal plan.

Edit: My post was merged with this topic, and it seems like we're all facing the same issue. Safari might not be the only problem though, as I'm seeing it in Chrome on iPad too.

To rule out old 7.0 Squarespace sites being the issue, I've also tested on my own site, which is built on 7.1 Fluid Engine, as seen on the following page: https://www.victoryoverall.co.uk/anchor-link-page

Each button should link to the relevant section on another page, but the issue persists.

Edited by victory_over_all
Post merged with another similar topic. Additional testing on 7.1 site.

Cross-discipline designer aka Victory Over All, Welsh-born and France-based, creating graphic design, branding and illustration.
⚔️ No corporate design devoid of character or soul. No buzzword-filled nonsense. Just strong design that hits hard, cuts through the mundane and stands out from the crowd.
🔗 victoryoverall.co.uk

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
On 9/8/2023 at 1:30 AM, victory_over_all said:

I'm having an issue with anchor links on the following site: https://carolechevalier.co.uk

On the site linked above, there are links in the Services section which link to particular sections of the English and French Services pages.

These links work as intended when testing in the following browsers:
✅ Chrome and Firefox on desktop (macOS)
✅ Chrome on Android 

But they don't work in the following browsers, instead they send the user to the top of the linked page:
❌ Safari on desktop (macOS)
❌ Chrome and Safari on iPad

The template used is Brine, I've turned off Ajax loading through the site styles, the sections I'm linking to are sections within index pages so I'm using their unique id as recommended by Squarespace, "www." prefix has been turned off and I've made sure that the URLs don't include the "www.", and the URLs have a / between the page slug and the #.

I've tried a few different ways of writing the URLs, and I've tried using simple code blocks with an empty div and giving that an id instead of using the section id, but each time the result is the same: Works in some browsers, but not in others.

Anybody found a fix or workaround yet? I've searched, but a lot of the solutions use code injection, which I can't do as the site is on a Personal plan.

Edit: My post was merged with this topic, and it seems like we're all facing the same issue. Safari might not be the only problem though, as I'm seeing it in Chrome on iPad too.

To rule out old 7.0 Squarespace sites being the issue, I've also tested on my own site, which is built on 7.1 Fluid Engine, as seen on the following page: https://www.victoryoverall.co.uk/anchor-link-page

Each button should link to the relevant section on another page, but the issue persists.

You can edit Site Footer > Add a Markdown Block > Use this code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
function scrollToAnchor(aid){
    var aTag = $(aid);
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor(location.hash);
})
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
hollykmsmith Level 4

hollykmsmith

Posted
Posted

I'm having issues with my anchor links, which I'm using as dropdown menu items under 'About' within the navigation menu. They work fine on desktop when using Chrome. But on Safari (desktop) as well as mobile and tablet (regardless of whether it's Chrome or Safari) they simply take users to the top of the 'About' page, rather than scrolling to the relevant sections.

Here's how I have it set up:

I've set up a folder menu item in the top nav bar, titled 'About'. The sub-navigation items are set up as anchor links:

  • Our story (which is at top, so I simply link to the 'About' page, rather than an anchor link)
  • Meet the team (anchor link)
  • What we stand for (anchor link)

I've added code blocks at the top of each of these sections with the code: 

<a name="meet-the-team" class="anchor-link">
  
</a>

and  

<a name="what-we-stand-for" class="anchor-link">
  
</a>

Then in the page settings, I've used the links

I also tried just using the URL slug and relevant anchor link (e.g. /about#meet-the-team), rather than the whole URL, but I still get the same issue.

I've also added some CSS so it smooth scrolls, rather than jumps - and I've offset the Y axis slightly so the title isn't hidden under the nav menu when it scrolls to that section. 

// ANCHOR LINK OFFSET

.anchor-link {
  scroll-margin: 200px;
}

// SMOOTH SCROLL FOR ANCHOR LINKS

html {
scroll-behavior: smooth;
}

SO. Any ideas on what's going wrong and why my anchor links only work on desktop (Chrome) and not mobile, tablet or desktop (Safari)?

Screenshot 2023-09-13 at 5.31.39 PM.png

Link to comment
Ziggy Level 14

Ziggy

Posted
Posted

You need to define the anchor link with an ID not NAME, change this: 

<a name="meet-the-team" class="anchor-link">
  
</a>

to this:

  

<a id="meet-the-team" class="anchor-link">
  
</a>

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
hollykmsmith Level 4

hollykmsmith

Posted
Posted

@Ziggy thanks for the suggestion but it's still not working properly, even with 'name' changed to 'id'. 

The anchor links work if I'm already on the 'About' page, but if I'm coming from a different page, say, the homepage, they just take me to the top of the 'About' page, without scrolling down to the relevant section (same issue across desktop (Safari), mobile and tablet). 

Link to comment
Ziggy Level 14

Ziggy

Posted
Posted

Try changing links from this:

/about#meet-the-team

to this:

/about/#meet-the-team

note the extra forward-slash

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
thewriterb Level 4

thewriterb

Posted
Posted (edited)

Here is what I have found on my site when using Safari. I have one page that I use them on. One near the top of the page, the second mid way down. If I click on the top one it will not take me to the second one. But if I manually scroll down to the second link and click on it, it will work, taking me back to the top link. After that BOTH anchors links work just fine in Safari. If I leave that page and then come back to it, the top no longer works again. My links seem to work with other browsers.  website: ofwhitewalls.com

Update: If I on either my iPhone or iPad and using Chrome, I still have the same problem as if using Safari. On iMac using Chrome, no problems.

Edited by thewriterb
Link to comment
victory_over_all Level 5

victory_over_all

Posted
Posted
On 9/11/2023 at 11:58 AM, tuanphan said:

You can edit Site Footer > Add a Markdown Block > Use this code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
function scrollToAnchor(aid){
    var aTag = $(aid);
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor(location.hash);
})
</script>

 

@tuanphan Thank you! It works 🥳🌟🎉

I added the exact code above to the footer, in a Markdown Block, as described. Tested immediately in Safari on macOS, and it worked 👍

For some reason I thought that adding JavaScript wasn't possible in sites on a Personal Plan, even in Markdown blocks. No idea why I've thought that for so long, it's great to see that it's possible!

Cross-discipline designer aka Victory Over All, Welsh-born and France-based, creating graphic design, branding and illustration.
⚔️ No corporate design devoid of character or soul. No buzzword-filled nonsense. Just strong design that hits hard, cuts through the mundane and stands out from the crowd.
🔗 victoryoverall.co.uk

Link to comment
AlinaH Level 4

AlinaH

Posted
Posted
On 9/11/2023 at 5:58 AM, tuanphan said:

You can edit Site Footer > Add a Markdown Block > Use this code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
function scrollToAnchor(aid){
    var aTag = $(aid);
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor(location.hash);
})
</script>

 

Hi! This ALMOST solved my issue - my drop down menu navigation worked only on chrome and after I used this code, it scrolls on mobile but a bit past the section needed, but still no action on desktop Safari - it still opens top of page no matter what title I select (under "services"). Is there anything I can adjust to make it work on all software and devices?

https://www.alinahetz.com/

Link to comment
morenothing Level 4

morenothing

Posted
Posted

Hey I found this solution on another thread that ended up fixing it for me. 

use this code to Code Injection > Footer 

<!-- by @nhannhot-tuanphan -->
<!-- fix anchor links on iOS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
function scrollToAnchor(aid){
    var aTag = $(aid);
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor(location.hash);
})
</script>

 

Link to comment
April_P Level 1

April_P

Posted
Posted

A site I worked on for a client that owns a wedding venue is also having this issue. Anchor links worked fine on mobile up until a few weeks ago. Now they just take you to the top of the page. They work great on desktop, but it doesn't matter if it is Chrome or Safari for mobile, it's not working. Their entire online guest info "book" is built this way, with QR codes throughout the venue linking to different specific anchors on the page. I've read other threads that were "solved" saying it was an Apple Update issue, yet this seems to be an ongoing issue not just with Safari. Will be following this thread to see if there is a real solution to implement other than having to create individual pages in the site!

Link to comment
Turbiville Level 5

Turbiville

Posted
Posted
On 9/15/2023 at 4:46 AM, victory_over_all said:

@tuanphan Thank you! It works 🥳🌟🎉

I added the exact code above to the footer, in a Markdown Block, as described. Tested immediately in Safari on macOS, and it worked 👍

For some reason I thought that adding JavaScript wasn't possible in sites on a Personal Plan, even in Markdown blocks. No idea why I've thought that for so long, it's great to see that it's possible!

what is a "markdown block"?  Many of use chose to move to Squarespace so we don't have to code or know this terminology.  It would be helpful when providing solutions to assume that since Squarespace markets itself as drag and drop, that those of us that need help don't know CSS or code at all. 

Link to comment
Turbiville Level 5

Turbiville

Posted
Posted

Ok I looked it up and the Markdown Block is a block just like adding a picture, shape, or anything else.  It's basically an empty text field to add code.  

I did try following the suggestion to add in the footer a Markdown Block with the following code and still Safari breaks the link when not on the home page.  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
function scrollToAnchor(aid){
    var aTag = $(aid);
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor(location.hash);
})
</script>
Link to comment
digitalnomadin Level 5

digitalnomadin

Posted
Posted

Hi,

on one of my clients websites, I'm using anchor links zu move from the main navigation to different sections on the page. 

Those anchor links seem to work just fine on Google Chrome and Firefox but not on Safari.

Any hints why they are not working on Safari? I'm a bit clueless after trying several options.

Website: https://www.insolvenzordnung.at/

Thankful for any advice!

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources