So it recently came to my attention that anchor links did not work correctly when the last reply link was clicked on our forum at ThemeFreak. The problem was that when I clicked on the last post link the page would jump to the correct post, but the fixed forum header would cover part of the forum content. There’s no need for any JS or JQuery fix. Simple HTML & CSS works.

The Problem

We had a fixed forum header with our horizontal navigation setup like this:

<div id="top-nav" class="position:fixed;top:0;width:100%">

<!-- this is where our menu was -->

</div>

After clicking the link to view the last post the page would jump to the following line at the post:

<a id="pid2160" name="pid2160"></a>

Obviously, what is in red would be specific to the link, but this is just to show you an example. The fixed forum header would then cover part of the post content we wanted to see.

The Solution That Worked

We added a new class to the anchor link:

<a id="pid2160" class="anchor" name="pid2160"></a>

The MyBB specific template that we edited was postbit_classic and postbit. For other forum software it’s the same idea.

This is the CSS we have in the anchor class that was added to the anchor link:

.anchor {
  display: block;
  height: 100px;          /* this is the height of your fixed element */
  margin-top: -100px;     /* this is the height of your fixed element */
  visibility: hidden;
}

If you still aren’t happy with the way it looks with correct height, then adjust accordingly so that the anchor link works as perfect. I hope this helps someone as much as it helped us.