Named anchor (A) with NAME same as a DIV ID conflict
anchor, html, url
Solution
`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.
Parse the URL, and let fragid be the component of the URL.
If fragid is the empty string, then the indicated part of the document is the top of the document; stop the algorithm here.
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.
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.
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.
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.
Otherwise, there is no indicated part of the document.
Problem
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.