Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

CSS – Offsetting a HTML anchor point

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!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion