If you’ve ever used anchors in HTML pages you probably already know what the issue is. Sometimes when you add an anchor point above the div you want it to scroll down to, when you click the link you quite often find it’s cutting off some of the section you want to have within the viewport. You can use jQuery or JavaScript to resolve this issue but I find using a small amount of CSS does the job!

Okay so here is the super easy solution, first add a class to your link:-

<a class="anchor" id="top"></a>

You can then position the anchor and offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -200px will position the anchor up 200px:-

a.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}

And there you have it, you now have control of the anchor point scroll to position, just tweak the ‘top’ attribute to suit your needs!