CODEWITHSUNDEEP
htmlxhtmlsafari
Benbob
Benbob

Reputation: 14244

Safari anchors on links not working

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?

Upvotes: 8

Views: 41698

Answers (6)

DavidMB
DavidMB

Reputation: 45

It has not worked with the previously proposed solutions, it has worked for me to create a redirection using javascript in the following way.

<!-- <a href="#first-block"> -->
<a href="javascript:redirection('first-block')">

function redirection(destination){
    window.location.href = "example.com/page.html#" + destination;
}

I leave it here in case someone serves you in the future.

Upvotes: 0

LukyVj
LukyVj

Reputation: 1491

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+

Upvotes: -2

Jase Whatson
Jase Whatson

Reputation: 4207

For me, I simply had to change

http://domain.com/page#myanchor

to

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

Upvotes: 13

frostedpops
frostedpops

Reputation: 165

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 :))

Upvotes: 2

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

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.

Upvotes: 1

Benbob
Benbob

Reputation: 14244

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.

Upvotes: 19

Related Questions