由於固定標題，ID不正確的錨點URL

Question

我在我們的網站上使用高度爲58px的固定標題。

現在我想鏈接到頁面上的一個錨點，但這不起作用，因爲錨點的起點位於標題後面。

我不能給特定的錨部分一個邊緣或填充頂部，因爲這是醜陋的顯示。

我使用類似：

<a href="#test">Test link</a> 

和：

<p id="test" class="anchor"> 

我怎樣才能改變錨的起始點，所以它的頭後開始。

看到這個的jsfiddle：https://jsfiddle.net/vrLs0wkk/

Answer 1

簡單。你的目標p元素中添加一個新的元素，並給了id屬性改爲：

<p> 
    <span id="test" class="anchor-point"></span> 
    ... 
</p> 

現在你們p元素具有相對定位：

p { 
    position: relative; 
} 

然後設置你的新.anchor-point元素被定位在您的p元素的頂部某處並給它visibility: hidden以使其完全隱形：

.anchor-point { 
    position: absolute; 
    top: -70px; 
    visibility: hidden; 
} 

JSFiddle demo。

Answer 2

在你的CSS將這個。

:target:before { 
    content: ""; 
    display: inline-block; 
    height: 250px; 
    margin: -180px 0 0; 
} 

改變你喜歡的高度。