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.

possible duplicate of [Fixed position navbar obscures anchors](http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors) — Telmo Marques, May 10 '14 at 12:41
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. — Shomz, May 10 '14 at 12:42
@TelmoMarques You are right about the question. However, the answers are not satisfying there — Simon Ferndriger, May 10 '14 at 13:37

score 21 · Accepted Answer · edited May 23 '17 at 11:55

21

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.

edited May 23 '17 at 11:55

Community

1
1

answered May 10 '14 at 13:42

Simon Ferndriger

4,455
6
28
53

score 3 · Answer 2 · answered Apr 03 '17 at 18:34

3

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

answered Apr 03 '17 at 18:34

Maximus

1,417
15
19

How to control the anchor landing position

2 Answers2