Safari anchors on links not working

Question

My html anchor is as follows.

<a name="template-8"/>
<h4 class="template" id="template-8">A title</h4>

As far as I know the browser should skip to the element with a matching name or id attribute.

When I type in the url http://my.site.com/templates#template-8 safari jumps down the page as expected.

However when linking as below the anchor does nothing. Chrome, Opera, IE7 and Firefox all work.

<a href="http://my.site.com/templates#template-8">A link</a>

Safari is version 5.0, could this be a safari bug?

Answer 1

For me, I simply had to change

http://domain.com/page#myanchor 

to

http://domain.com/page/#myanchor

Answer 2

To fix an anchor tag in Safari. I proceed this way :

 <a href="#" class="btn">A tag</a>

And on my css file :

.btn{
  display:block;
  width:100%;
  height:100%;
}

The important thing is for some reason, sometimes Safari needs to see your link as a block, and it can be useful if you create a list, with some links inside. Example :

<ul>
    <li><a href="#" class="btn">A tag</a></li>
    <li><a href="#" class="btn">A tag</a></li>
</ul>

Works for Safari 6+

Answer 3

I just ran into the same issue and found your post while searching - obviously you've fixed this since it was back in 2010 and but figured I would post what I found in case someone else finds this. :)

I'm using htaccess to redirect my url from mydomaincom/index.php to mydomaincom/ and found that my nav didn't work in Safari since my href addresses where index.php#value and Safari v5 wouldn't carry over the anchor links.

Rather than turn off my redirect I just changed the urls to point to mydomaincom/#value. Not only did this work great for all browsers but it also made my page quicker (not yet sure how but will search this now :))

Answer 4

There are two side issues I see, which aren't the cause (since you found the problem already) but probably don't help:

• Self-closing <a> tag. You can't self-close tags that are supposed to have end tags, it should be: <a name="template-8"></a>.
• The name and id attributes share the same "namespace", so you cannot have the same value for a name and id attribute. All browsers from the past 10 years support anchors on IDs, so scrap that useless link tag.

Answer 5

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.