Именованный якорь (A )с ИМЯ, таким же, как конфликт ID DIV

Я работаю на сайте, который использует прослушиватель для хэша, чтобы показывать и скрывать DIV контента и прокручивать до именованного якоря с тем же именем.

У меня была странная проблема, когда вместо прокрутки к якорю он прокручивался до DIV с идентификатором, совпадающим с именем якоря.

Как только я изменил DIV ID на что-то другое, поведение было ожидаемым.

Я не могу найти никакой документации по этому поводу, и мне интересно, задокументировано ли это поведение.

Код, который работает:

<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>

Не работает должным образом:

<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>

Во втором примере он будет прокручиваться до буквы P с именем «bottom». Точно так же, если я создаю DIV внизу страницы с идентификатором «bottom» и нажимаю page.html #внизу, он прокручивается вниз до этого DIV.

Просто кажется запутанным. Идея, почему это работает именно так? Такое же поведение в Safari и FF.