Anchor not to top of page, but 200px down

Question

I have an anchor on a element which makes the navigation jump to that point. However the anchor snaps it right up to the top of the viewport. Due do a fixed navigation, it's now hidden behind.

Is it possible to make the anchor not snap to the top of the viewport and instead 200px down the page?

Site here: http://www.haselden.co.uk/james/docs

Answer 1

Dirty solution for this but does work, thanks @SteveJenkins for coming up with this, though I added a tweak.

<a name="AnchorName" class="anchor">anchor text [invisible]</a>

.anchor {
   position: relative;
   top: -[number]px;
   visibility:hidden;
}

Answer 2

I had a similar problem and came upon this question. No answers were working quite like I wanted. I had to go a bit further and wanted to share my findings.

A bit of context first. I was doing some kind of error parsing which highlights interesting areas into a HTML-rendered sourcecode viewing page. There is an index table allowing for quick navigation, which is in a fixed height-variable header. Which explains why I wound up on this question page.

My problem was that the anchor was taking visual space and moving the sourcecode around, shifting the text by the anchor's length and messing with code formatting. I tried multiple ways to make it NOT take space but still exist in the page so the anchor works. In the end, instead of a .(as per @noregt's comment), I settled for  which would be the backspace character.

Each anchors are generated dynamically like <a name="[some unique name]" class="anchor">&#008;</a> and then referenced in the fixed header.

A little bit of Javascript helps with the dynamic header height and anchors positioning (grabs all anchors and adjust the top padding dynamically):

<script type="text/javascript"><!--
var height = document.getElementById("head").offsetHeight;
var a = document.getElementsByClassName('anchor');
// src: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript
for(key in a) {
    if (a.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
        a[key].style.paddingTop = height + 'px';
    }
}
--></script>

This solution works perfectly for dynamically generated anchors with a variable-height but fixed header. Hope this can help someone else.

Answer 3

This is much easier now with CSS3. The long explanation is here: https://css-tricks.com/hash-tag-links-padding/ but the short version is

a::before {
    display: block;
    content: " ";
    margin-top: -70px;
    height: 70px;
    visibility: hidden;
}

Answer 4

Add a hiden element 200px lower and make an anchor to it instead.

Answer 5

I was able to solve this by actually applying CSS to the anchor. So for the anchor I would have this...

<a name="AnchorName" class="anchor"></a>

And then in the CSS I would have this...

.anchor {
   position: relative;
   top: -[number]px;
}

Note that I have noticed some inaccuracies in how far the anchor is moved in different browsers. So it might not be possible to make things align perfectly. You'd probably need some fancy jquery or something if you wanted it to be perfectly positioned.