Search code examples
htmltagsanchor

HTML Links with anchor and pixel


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.


Solution

  • 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/