How to control the anchor landing position

Question

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.

Answer 1

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.

Answer 2

This worked for me:

<a href="#learnmore"><button type="button" class="large button">Click me!</button></a>
<a class="hidden-anchor" name="learnmore"></a>

And the css for the anchor link.

 .hidden-anchor {
    position: absolute;
    top: -100px;
 }