Anchor Name Links

Apparently there are some quirks to named anchors in various browsers. For instance, let’s say you want to link to a midway point on another page. it would looks something like this:

Link on page one:

<a href="http://example.com#midway-point">Midway Point</a>

Anchor on page 2:

<a name="midway-point"></a>

This seems to work just fine in all browsers except Safari. It turns out you have to restructure the link a bit by adding a slash before the ‘#’. So the link then becomes:

<a href="http://example.com/#midway-point">Midway Point</a>

It’s not a big deal really, but it is interesting how browsers handle the non-slash version.

  • Chrome: works
  • IE: Redirects to the slash version by automatically inserting the slash.
  • FF: Redirects to the slash version by automatically inserting the slash.
  • Safari: Fails. Redirects to the page without the anchor.

Yet another example of browser differences. It’s good to know the “right” way to accommodate them though.