超鏈接和片段ID垂直偏移問題

在我的頁面頂部是一個靜態位置的菜單條，它在滾動期間跟隨着屏幕。超鏈接和片段ID垂直偏移問題

使用片段鏈接時，滾動位置需要被菜單條的高度所偏移。這怎麼能實現？

<a href="#fragment">Go to fragment</a> 
<div id="fragment">...</div> 

html { padding-top: 38px; } /* Offset page to allow for menu strip */ 
.menu-strip { position: fixed; top: 0; right: 0; left: 0; height: 38px; }

有一個簡單的CSS變化可以作出來實現這一目標？

否則，當指定一個片段時，是否有一種通用的方法來抵消滾動200px？

來源

2011-07-16 Lea Hayes

我不明白的問題，什麼是「片段連接」的需要？ – vinceh

很難描繪出你所描述的內容。 @vinceh我認爲他的意思是散列鏈接。 –

@vinceh它是當你鏈接到頁面的特定部分。 Web瀏覽器跳轉到具有在URI片段中指定的ID的元素。 uri片段是散列之後的部分。 –

你想要做的就是處理你自己的散列鏈接。一個好主意是將所有你做的散列鏈接的a分組。例如

$(".ahashlink").click(function() { 

    var location = $(this).attr("href"); 
    var offset = $(location).offset().top; 
    $("body").scrollTop(offset+38); 
    return false; 
});

這將滾動到正確的位置PLUS增加38個像素（頂欄的高度）。但是，這不會改變您的瀏覽器中的URL以包含正確的散列。這是因爲一旦你有window.location.hash = "#something"，那麼你的窗口將自動滾動到該散列。所以記住這一點。

來源

2011-07-16 05:46:10 vinceh

感謝您的回覆。這也需要在頁面之間工作，因此需要在頁面加載時觸發。我很驚訝，當瀏覽器不能自動偏移'html {margin-top：38px; }'被使用，但我想這是一個相當罕見的要求。再次感謝 –

這篇舊文章有一個HTML+CSS only solution。

的基本思想是利用:before css selector插入一些隱藏的內容每個可連結的元素之前，以抵消他們：

<linked_elements>:before { 
    display: block; 
    content:" "; 
    margin-top: -<offset>; 
    height: <offset>; 
    visibility: hidden; 
}

這裏是他們的demo的jsfiddle。

這也將（我認爲）帶走html { padding-top: 38px; }

來源

2015-08-04 11:54:18 dougcosine

超鏈接和片段ID垂直偏移問題

回答

相關問題