錨點不在頁面頂部，而是在200px下方

Question

我在元素上有一個錨點，使導航跳到那一點。然而，錨點將其向上視到視口的頂部。由於做了一個固定的導航，它現在隱藏在後面。

是否有可能使錨點不能捕捉到視口的頂部，而是在頁面上向下200px？

站點位置：http://www.haselden.co.uk/james/docs

Answer 1

這方面的骯髒的解決方案，但沒有工作，謝謝@SteveJenkins提出這個，雖然我添加了一個調整。

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

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

Answer 2

添加隱伏元素200像素較低，使得一個錨它來代替。

Answer 3

我能夠通過實際應用CSS來解決這個問題。所以對於錨我會這樣...

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

然後在CSS我會這樣...

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

請注意，我已經注意到了一些不準確的錨多遠在不同的瀏覽器中移動。所以可能無法使事情完美對齊。如果你想讓它完美定位，你可能需要一些奇特的jQuery或其他東西。

Answer 4

我有類似的問題，並提出這個問題。沒有答案工作得很像我想要的。我不得不進一步，想分享我的發現。

有點上下文優先。我正在做一些錯誤解析，它將有趣的區域突出顯示爲HTML呈現的源代碼查看頁面。有一個允許快速導航的索引表，它位於一個固定的高度可變的標題中。這解釋了爲什麼我在這個問題頁面上結束了。

我的問題是，錨採取視覺空間和周圍移動源代碼，移位由錨的長度的文本，並用代碼格式化搞亂。我嘗試了多種方法，使其不佔用空間，但仍然存在於頁面中，以便錨點起作用。最後，而不是.（根據@ noregt的評論），我解決了這將是退格字符。

每個錨都像<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> 

此溶液完全適用於動態生成的錨具有可變高度但固定的標題。希望這可以幫助別人。

Answer 5

現在用CSS3更容易了。長的解釋是這裏：https://css-tricks.com/hash-tag-links-padding/但短版本是

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