HTML導航錨點不應跳轉到頁面頂部

Question

我嘗試創建一個網站，並有“錨”導航問題。 在頁面頂部有一個固定的標題。 在標題下滾動主要部分消失時。

現在我在左側有一個導航，跳轉到不同的標題。 但是通過“錨”功能，標題總是跳得遠遠。 他已經在標題下消失了。 是否有可能跳到頂部？

這是一個小提琴的例子。

<div class="header">Header <br> <br> <a href="#Title2">Title2</a></div>
<div class="main">
    <h1>Title 1</h1>
    <h1 id="Title2">Title 2</h1> 
</div>

.header{
width:500px;
height:100px;
background-color: red;
position:fixed;

}
.main {
padding-top: 100px;
width:500px;
height:1000px;
background-color:lightblue;

}

http://jsfiddle.net/BLrUG/

單擊“Title2”鏈接，查看問題。

這是BBallBoy

Answer 1

固定的位置就像絕對一樣...其他元素不知道這個標題的消息，它們在它上面/下面。它的代碼正在運行你需要添加這個：

*{margin:0;padding:0}

清除空白，你的頁面看起來很好

也許你正在尋找這個Jquery功能 ：

Answer 2

您可以使用JavaScript調用滾動到元素，但稍微修復偏移量，以便標題不會覆蓋它。

function scrollTo(id) {
    var offset = 0;

    //Get element
    var obj = document.getElementById(id);

    //Determine offset  
    if (obj.offsetParent) {
        do {
            offset += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }

    //Account for header
    offset -= 120;

    window.scroll(0, offset);
}

然后，而不是使用錨中的ID，您將其傳遞給函數

<a href="javascript:void(0);" onclick="javascript:scrollTo('Title2');">Title2</a>

您需要使用偏移修正來找到最佳值。 您可能還希望將其作為函數的參數，以使其更具可重用性。

Answer 3

在標題類中使用頂部位置

 top:0px; 

並為兩個標題段落使用div，並為para div設置上邊距。