Safari ignoring/removing anchors (or "hashtags") when clicking hyperlinks?

Question

I need to point one page to another and then scroll to a particular section. In Chrome and Firefox, using an URL like www.example.com#section1 does the trick. (#section1 can be an anchor or an element's id).

However, in Safari, the hash disappears when I click the link.

Why is this happening? Is it possible to do it on Safari? If not, how can I get around this problem?

Solution 1

When using hyperlinks that point to inside sections on other pages you must remember to add a slash (/) before the hashtag for cross browser compatibility.

Eg: www.example.com/#item-1

doing www.example.com#item-1 isn't accepted by all browsers (apparently by Chrome and Firefox it is)

Solution 2

Case: I have parameters after '#' like url#myParam=123, when I changed params like url#myParam=789 Safari sometimes loaded previous page based on myParam=123,

although in Address bar it showed myParam=789

Solution : Use url?#myParam=123, then Safari will everytime load new page.
Using '?' before '#' solved my problem.

Solution 3

I had a related problem with Safari (on iPhone/iOS) seemingly stripping off the hash/fragment when doing a:

var newHash = ...;
window.location.replace("#" + newHash);

The actually problem was a javascript error that only appeared on Safari. Since I could not easily assess a javascript console for the iPhone, I chose to download an old version of Window's Safari (related post, download).

Then, I could replicate the problem from the iPhone on my Window's desktop using the old version of Safari. At that point, I found a javascript tag had a missing ']'. This was a legitimate bug, but it was somehow ignored by Chrome, Firefox, and IE.

The window.location.replace() was not even being called, because the code was breaking out on the javascript error. So the problem wasn't that Safari was stripping the hashtag, even though it appeared that way from multi-browser testing.

Solution 4

I just experienced an issue like this. I was using a URL re-write in the asp.net web.config. With Safari, the hash and everything after was removed. After trying some of the things mentioned above I was still having problems. The issue for me was that this was all happening under HTTPS. Once I specified the full URL in the redirect and included the https:// scheme the redirect worked correctly and preserved the hash. Note this wasn't an issue with Chrome or Firefox.

View more solutions

Comments

[mrbinky3000]

Just wanted something that might help others. I was having the same problem. The format was exactly like the solution. However, the server was using mod-rewrite to change the path (Wordpress .htaccess). It seems, Safari strips the hash when the url is redirected by the server.

[micah94]

You also need this for URLs that look like directory names such as http://www.example.com/foo#item-1. Safari redirecting here will drop the fragment. You must instead send them here http://www.example.com/foo/#item-1.

[Maha Dev]

Worked fine for me. Thank

[Roland D.]

Worked fine for me too. If I redirect by 301 to /sites/#config, Safari go to /sites/, but when I redirect to /sites/?#config, Safari go to /sites/?#config I have edited my redirect function to add "?" if missing when hash is inside url.