Search code examples
htmlscrollanchorfixed

How to control the anchor landing position

We currently have the problem, that links in the form www.example.com/#section don't jump to the right location, because we have a fixed navigation at the top which covers up the first part of the website.

<div id="anchorpoint">Some content here</div>

How can we tell the browser to jump to the anchor position + 100px?

Thank you.

Solution

  • HTML (add an additional anchor tag)

     <a id="anchorpoint" class="anchor"></a>
 <div>Some content here</div>

    CSS

    .anchor {
    display:block;
    padding-top:100px;
    margin-top:-100px;
 }

    It's a slight modification of Fixed position navbar obscures anchors. The advantage lies there, that you don't prepopulate padding and margin of the actual container.