HTML anchors have been around as long as HTML itself, but there’s often an issue that people can’t seem to fix when it comes to the exact position the page lands, especially on modern themes with fixed or resizable headers, something that’s more than a little annoying.

Fortunately the fix (or non Javascript workaround) is a simple one: simply add a class to the “a” tag and then use some CSS to do the rest, adjusting the number of pixels (in this case -50px) you need, up or down to get it just right. For example:

YOUR ANCHOR

<a name="landhere" class="myanchor"></a>

THE CORRESPONDING CSS

a.myanchor {
  position: absolute;
  left: 0px;
  top: -50px;
}

Now when someone follows the anchor ( in this case yourpage/#landhere ) link, they will appear exactly where you need them to on the page. Of course, we’re merely moving the anchor, but it’s surprising how many people have problems with this.

Happy clicking!