Anchor links does not scroll to the correct position

There are several issues that can cause local anchor links to not scroll to the right position. The first thing to check is if you have an id-tag that has the same name as the anchor. In this case the browser will scroll to the id position instead. The solution is to name the anchor and id with different names.

Example:

<div name="myanchor">
<p>Some random text</p>
</div>
<a href="#myanchor">Go to some random text</a>

The above example will behave as expected.

But in this example the link will scroll to the h1 instead of the div:

<h1 id="myanchor">
<div>
<p>Some other random text</p>
</div>
<div name="myanchor">
<p>Some random text</p>
</div>
<a href="#myanchor">Go to some random text</a>

To avoid this, make sure the anchors (name) and id have different names.

There are also other sitiuations where the local anchor does not scroll correctly covered in this article.