How to debug bookmark bindings doesn't work

Question

I have a very complex html page and I added some bookmark bindings at different points. Anchors are as follows:

<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 does not change, and the page does not move.

If I take my anchors and put them on a simpler page, they will start working, so I think that something should somehow interfere with the navigation, but I can’t figure out how to nail it. I was wondering about a bug in javascript somewhere that canceled navigation, but there are thousands of javascript lines on the page, and I have 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? target anchors are within the <div> with the CSS overflow:auto; property overflow:auto; . This causes the scrollbar to appear inside the div instead of the edge of the page - which does not match my plain text page.

UPDATE 2: overflow: auto does not break named anchors; tested with a simple example

Answer 1

This is definitely a scripting issue, not an anchor syntax. I finally (accidentally) debugged the problem by adding some invalid javascript to the click () handler, which broke the click handler but made the anchors start working again. I could come from there.

Answer 2

Named anchors must have one name or identifier (better identifier, since the name is processed)

this will work:

 <a href="#foo-bar">click here for foo bar</a> lorum ipsum etc <a id="foo-bar">foo bar</a> 

Answer 3

Try the following:

 <a href="#foo bar">click here for foo bar</a> lorum ipsum etc <a id="foo bar">foo bar</a> 

So basically change your name attribute for the id.

Also ... I think that basically it will look for "foo", not "foo bar". I have not tested this though.