Question

I am workign on a site that is using a listener for the hash to show and hide content DIVs and to scroll to the named anchor of the same name.

I was having a weird issue where instead of scrolling to the anchor, it would scroll to the DIV with the ID the same as the anchor’s name.

Once I changed the DIV ID to something different, the behavior was as expected.

I can’t seem to find any documentation on this and was wondering if this is documented behavior.

Code that works:

<a name="top">top</a>

<p id="bottomx" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

Not working as expected:

<a name="top">top</a>

<p id="bottom" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

In the second example, it would scroll to the P named “bottom”. Likewise, if I make a DIV at the bottom of the page with an ID of “bottom” and I hit page.html#bottom, it scrolls down to that DIV.

Just seems confusing. An idea why this is working this way? Same behavior in Safari and FF.

Answer 1

id has precedence over name:

For HTML documents (and HTML MIME types), the following processing
model must be followed to determine what the indicated part of the
document is.

1. Parse the URL, and let fragid be the component of the
   URL.

2. If fragid is the empty string, then the indicated part of the
   document is the top of the document; stop the algorithm here.

3. Let decoded fragid be the result of expanding any sequences of
   percent-encoded octets in fragid that are valid UTF-8 sequences into
   Unicode characters as defined by UTF-8. If any percent-encoded
   octets in that string are not valid UTF-8 sequences (e.g. they
   expand to surrogate code points), then skip this step and the next
   one.

4. If this step was not skipped and there is an element in the DOM that
   has an ID exactly equal to decoded fragid, then the first such
   element in tree order is the indicated part of the document; stop
   the algorithm here.

5. If there is an a element in the DOM that has a name attribute whose
   value is exactly equal to fragid (not decoded fragid), then the
   first such element in tree order is the indicated part of the
   document; stop the algorithm here.

6. If fragid is an ASCII case-insensitive match for the string top,
   then the indicated part of the document is the top of the document;
   stop the algorithm here.

7. Otherwise, there is no indicated part of the document.