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

assuming youre talking about the green arrow? – Jake Long Aug 08 '12 at 20:23 — Jake Long, Aug 08 '12 at 20:23

score 9 · Answer 1 · answered Aug 08 '12 at 20:22

9

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.

answered Aug 08 '12 at 20:22

rgbflawed

1,957
1
22
28

Tried this and it didn't *really* work. When applying it to my H1 it just drags the h1 up to the top of the page, out of view. So I took it off my h1 and made it into an empty link, like your code. This didn't work. When I filled the link to say 'anchor' inside it it worked, but now there is some horrible text on my page that says 'anchor'. While this works OK on this area of the site, it won't work on the other pages. Can't have text saying 'anchor' written all over the shop. – Francesca Aug 08 '12 at 20:31
I'm going to give you a solution for this, because it does work though with a little fix. In order to make the anchor text I had to put in not show up I changed it to font-size:0; so that it does not display. Don't think it's the best way to do it as invisible text on the page is not good but it'll have to do. I'll accept any others that come along and can offer solutions to fix this without hiding text about the page. – Francesca Aug 08 '12 at 20:36
Hmm... I didn't have those problems. Maybe because I have been doing it like:
Anchor Text
Whatever, though. Glad you got it to work! – rgbflawed Aug 09 '12 at 15:48

score 5 · Accepted Answer · answered Aug 08 '12 at 20:39

5

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

answered Aug 08 '12 at 20:39

Francesca

26,842
28
90
153

That didi it :-) Just as a security measure I used a point as text, to be sure that it wouldn't get in the way anyhow. – noregt Mar 27 '15 at 09:31

score 4 · Answer 3 · answered Apr 14 '16 at 20:37

4

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

answered Apr 14 '16 at 20:37

Clay

319
2
15

This solution worked perfectly for me. Not sure why it doesn't have more upvotes. – insaner Oct 04 '18 at 03:02

Alexandre Delisle · Answer 4 · 2015-12-28T18:34:43.947

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"></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.

score 1 · Answer 5 · answered Aug 08 '12 at 20:22

1

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

answered Aug 08 '12 at 20:22

Kolyunya

5,973
7
46
81

I'm trying to avoid this, this was what I originally did but it caused no end of pain when trying to get the spacing of my content to work. – Francesca Aug 08 '12 at 20:24
Then you can try a solution by @Steven Jenkins. – Kolyunya Aug 08 '12 at 20:29

Anchor not to top of page, but 200px down

5 Answers5

Linked