Anchor tag doesn't work in iPhone Safari

Question

I'm having an issue with a named anchor tag in iPhone Safari browser. It works well in desktop browsers including Safari, but not working in mobile Safari. Weird!

For example my URL looks like:

http://www.example.com/my-example-article-url-is-like.php#articlebottom

the above URL is from a newsletter and it should go to the bottom paragraph in article page which I gave id like this:

<p id="articlebottom">paragraph is here</p>

When I click the above URL from Newsletter it goes to the article page, but not the bottom para where I specify id. Although I can see that the #articlebottom part is missing from URL when it came into the targeted page in Safari.

Any thoughts would be appreciated!

Answer 1

Opera, IE, Chrome and Firefox will carry over the anchor to the new page. However, Safari loses the anchor on the redirect.

So what if you add / just before the ID Tag?

Old URL Path: http://www.example.com/my-example-article-url-is-like.php#articlebottom

New URL Path: http://www.example.com/my-example-article-url-is-like.php/#articlebottom

Another solution is that you'd have to delete both "www." from the domain and add a forward slash before the anchor tag in the URL/pathname before Safari would respond properly. Firefox doesn't seem to care, and I haven't gotten to testing on IE yet.

Answer 2

just doing my due diligence and answering for anyone who is having this problem with Index navigation links on a Squarespace page and Safari on iOS. My anchor links were not working when formatted as such:

http://sitename.com/page#anchor

Then I tried this to no avail:

http://sitename.com/page/#anchor"

Rather than give up, light my computer on fire, and call it a day I tried:

http://www.sitename.com/page/#anchor

And it worked! So cheers if this helps anyone.

Answer 3

I couldn't get it working with above solutions so hopefully I did my own workaround.

Purpose: Scroll to anchor "#issues" after navigating to URL "https://example.com/issues/"

1. Create link "https://example.com/issues?anchor=issues"
2. On page "https://example.com/issues" add js

   <script>
       if (window.location.href.search("anchor=issues") > 0) {
           window.location.href= "https://example.com/issues/#issues";
       }
   </script>

Voila!

--

You can observe that after opening link "https://example.com/issues/#issues" Safari scrolls from anchor to the top of the page, then when you click to edit URL and hit submit button, you will be scrolled to anchor.

I hope they will fix it fast and after that they will add immediately push notification support.

Answer 4

Safari loses the anchor tag after redirecting. So avoid anything that leads to a (second) redirect.

• use the full URL (http://...)
• note if there is a redirect to www or not (www.domain...)

• add a trailing / if there is no prefix like .html/.php (mypage/)

  http://www.domain.tdl/mypage/#safari
  

Maybe it's useful to check for a redirect using tools like cURL

curl -I http://www.domain.tdl/mypage/#safari

Answer 5

I have been wrestling with this problem for a client of mine. I will not name names but I will share a solution I found which suddenly brought dead anchors links back to life and working on both the mobile and desktop versions of the site.

I had attributed the malfunction to an overabundance of page / site scripts and css which I can not change because while this site belongs to a local business it is part of a global corporate network which has its own protocols and best practices. In other words, I can specify inline styles to distinguish page elements but at the end of the day the page must conform to corporate guidelines and rules.

Here's a snippet of my code that embodies what I learned:

href="#anchorname" target="_top"

The key here is the target tag _top

According to http://www.w3schools.com/tags/att_a_target.asp the default target is _self and while your html generator may not write that specific bit of code into your pages which is to say that because it is the default IT DOES NOT HAVE TO BE SPECIFIED, my research has indicated that by specifying _top as the target the dead link problem was solved.

I hope this solution works for you.