Safari Anchors on Links Not Working

Safari anchors on links not working

The problem was I had a redirect header in the page I was linking to.

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

If you are having trouble with safari anchors disable any redirects.

Why does Safari not update the anchor link?

Turns out that for the anchor-links to work in this context, they have to be written as full URL, not relative to the folder structure.

This

href="https://website.com/about#anchor1"

Instead of this

href="../about.html#anchor1"

Anchor tag doesn't work in iPhone Safari

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.

Safari anchors on links not working

The problem was I had a redirect header in the page I was linking to.

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

If you are having trouble with safari anchors disable any redirects.

iPhone (Safari) anchor tags don't work as intended

There is a problem with CSS :focus on iOS Safari.

The answers from this question seem to work. You need to add tabindex="1" to your link:

<a href="#" class="showme" onclick="return false" tabindex="1">View Bio</a>

https://jsfiddle.net/1kqxopzs/



Related Topics



Leave a reply



Submit