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.

Ornstead

possible duplicate of Fixed position navbar obscures anchors – Shoat

The only solution without involving JS and repositioning your elements is to put the anchor point inside the element you want to scroll to, make it absolute, give it a 100px top margin and hide it. That way, you'd actually scroll to that invisible element, making the wanted element appear right at the top. – Muleteer

@TelmoMarques You are right about the question. However, the answers are not satisfying there – Ornstead

@Muleteer It works, but ONLY if you DON'T position it absolute – Ornstead

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.

Ornstead

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;
 }

Pasco

Answer 3

You can apply scroll-margin-top: 100px to the element you want to scroll to (set the value to the height of your navbar).

Krissykrista