<a href="#..."> link not working

Question

I am trying to create a set of links to specific sections in the page using the <a href="#..."> notation, but it doesn't seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tab changes the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:

<div>
    <p>Contents</p>
    <ul>
        <li><a href="#map">Map</a></li>
        <li><a href="#timing">Timing</a></li>
        <li><a href="#timingdetails">Timing Details</a></li>
    </ul>
</div>

And they should be linking to:

<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>

Links to external webpages work fine. Placing the id="..." feature inside an <a> tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/. This is within a Python Django project.

Any idea why this isn't working?

Answer 1

Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn't associate the id attribute with a location in the HTML Document for elements other than <a> but uses the name attribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:

1.Give your anchor divs both a name and an id to ensure max. browser compatibility, like:

<a href="#map">Go to Map</a> <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->

Demo: http://jsbin.com/feqeh/3/edit

2.Only use <a> tags with the name attribute as anchors.

This will allow the on-page links to work in all browsers.

Answer 2

what happened with me is that the href does not work second time and that because I should Remove hash value first,,

take look how I resolved it

<a href="#1" onclick="resetHref();">go to Content 1</a>

function resetHref() {
    location.hash = '';
}