I’ve got a really complicated html page and I’ve added some bookmark anchors at various points. The anchors look like this:
<a href="#foo bar">click here for foo bar</a>
lorum ipsum etc
<a name="foo bar">foo bar</a>
But when you click on them, nothing happens – the url in the address bar doesn’t change, and the page doesn’t move.
If I take my anchors out and put them into a simpler page, they start working, so I think something must be interfering with the navigation somehow, but I can’t think how to nail it down. I wondered about an error in the javascript somewhere that was cancelling the navigation, but the page has thousands of lines of javascript and I’ve not found anything suspicious yet.
The problem occurs in both Chrome and Firefox.
How can I debug this problem?
UPDATE: Could this be a CSS issue? the target anchors are within a <div> with the CSS property overflow:auto;. This is causing the scroll bar to appear inside the div instead of the edge of the page – which was not the case with my simple text page.
UPDATE 2: overflow:auto doesn’t break named anchors; tested with a simple example
This was definitely a scripting problem rather than the syntax of the anchor. I eventually (accidently) debugged the problem by adding some invalid javascript to the click() handler, which broke the click handler but caused the anchors to start working again. I was able to proceed from there.