Categories
code

Same Page HTML Anchor Not Working? Here is why

I have often encountered this issue where same page anchors do not work. When you click on a link that is supposed to take you to the designated position in the same page (as marked by the anchor), instead you land on the homepage with the name of the anchor appended to the home page URL.

For example, there is a Back To Top link that should return the user to the top of the same page. After tinkering a bit with it, I found out that the “base href” HTML tag plays a role in determining how these anchors work.

If your “base href” is set like this (click on View Source from the right click menu):

<base href=”http://www.example.com”>

Turns out that this tag controls the relative path of all same page anchors. Not really sure what this is used for, so I was able to remove it.

Without this, the same page anchors started working nicely. I am guessing that if this tag is correctly populated with the full path of the URL (not just the domain name), same page anchors should work equally well.