Geek asks and answers

An anchor is not for the top of the page, but 200 pixels down

I have a binding to an element that takes navigation to this point. However, the binding binds it to the top of the viewport. Must make fixed navigation, now it is hidden.

Is it possible to make the anchor not tied to the top of the viewport, but instead of 200px down the page?

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

+5
source share
5 answers

A dirty solution for this, but it works, thanks @SteveJenkins for that, although I added a tweak.

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

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

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

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

And then in CSS I will have this ...

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

, , . , . , , - jquery - , , .

+8

, . , . .

. , HTML. , , . , .

, , . , , . , . ( @noregt), &#008;, .

, <a name="[some unique name]" class="anchor">&#008;</a>, .

Javascript ( ):

<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 great for dynamically created anchors with a variable height, but with a fixed header. Hope this helps someone else.

+3
source

Add the bottom element 200px below and snap in instead.

+1
source

Now it is much easier with CSS3. Long explanation here: https://css-tricks.com/hash-tag-links-padding/ , but short version

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

More articles:


All Articles