如何添加padding-top到ancre鏈接？

Question

我想添加一個padding-top我div當我點擊鏈接的錨：

<a href="#myAnchor">Go to my anchor</a> 

... 

<div id="myAnchor"> ... </div> 

的問題是，我想剛纔添加的填充時我的鏈接重定向我的錨。我不想在html中添加padding-top，我只是不希望我的div位於我的頁面頂部，我需要填充或頁邊距。

謝謝。

Answer 1

我只知道一種方法：javascript。如果您已經使用jQuery：

$('a[href="#myAncre"]').click(function(){ 
    $("#myAncre").css("padding-top", "20px"); 
    }); 

但如果你不使用jQuery的已經，它可能是值得用簡單的JavaScript來做到這一點。

Answer 2

我認爲你要做的是在點擊鏈接時將瀏覽器窗口滾動到目標上方的幾個像素，而不是讓目標與瀏覽器窗口頂部齊平。

您可以查看這篇文章的幾種解決方案http://css-tricks.com/hash-tag-links-padding/

最簡單的解決方案，通常似乎是在你的CSS添加：

#myanchor{ 
    margin-top: -200px; 
    padding-top: 200px; 
} 

與任何價值，你認爲合適的更換200像素。 您也不妨使用一個類應用這個，因爲我asume你不會只是想使用它的一個項目:)

Answer 3

我認爲，最好的辦法是

#myanchor:before { 
    display: block; 
    content: " "; 
    height: 50px; 
    margin: -50px 0 0; 
} 

來源和演示：http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-B

如果選擇醜陋的方式（即margin-top: -50px;和padding-top: 50px;）層將留在底部，您需要使用z-index。