HTML Links with anchor and pixel

Question

I am looking for a solution without javascript, where I can use an link like this:

<a href='#link1 +60px'>

This is just an example for easier understanding. So what I am trying is, that I got an anchor in my website, and the link goes to that specific point + 60px further.

score 1 · Answer 1 · answered Sep 08 '16 at 12:16

1

This is impossible.

Your only options are JavaScript and linking explicitly to a spot (with its own ID) above where you want to link to.

answered Sep 08 '16 at 12:16

Quentin

914,110
126
1,211
1,335

score 1 · Accepted Answer · edited May 23 '17 at 12:22

So far the following is the best method I could find to position the landing position w/o javascript

HTML (add an additional anchor tag)

 <!-- Actual going to here -->
 <a id="anchorpoint" class="anchor"></a>
 <!-- Display point -->
 <div>Some content here</div>

CSS

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

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.

Try: https://jsfiddle.net/q6yvuhao/

score 0 · Answer 3 · answered Sep 08 '16 at 12:19

0

Is the anchor point invisible? If so, add a class to the link and the following CSS:

a.link {
   position:relative;
   top:60px;
}

<a class="link" href='#link1'>

answered Sep 08 '16 at 12:19

Neil K

1,318
1
14
23

HTML Links with anchor and pixel

3 Answers3