使用頁內定位鏈接控制頁面的位置

我在網頁上有一個固定的頂部導航欄100px深，並且該欄上的鏈接轉到id的頁面。該ID與每個部分的h3標題相關聯。不幸的是，點擊鏈接後，頁面向上移動，第一個100像素隱藏在固定頂欄後面。使用頁內定位鏈接控制頁面的位置

我可能會在頁面中的其他地方嵌入id的位置，比我鏈接的點高出大約100px（在給定圖形設計的時候並不那麼容易）。我想知道有沒有人知道有什麼方法可以迫使這些ID在頁面頂部停止100px？

不幸的是我不得不把開發網站放在維護屏幕後面，所以我不能提供一個URL。由於在期待（我的第一篇到計算器！）

傑里米

來源

2015-05-20 WebsWonder

你能爲我們提供的代碼片段？只是與您的問題相關的HTML/CSS/JS。你可以直接把它放在你的問題上，或與codepen分享...... – Dinei

這可能對你有幫助嗎？ http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header – rst

一種解決方案是使用:target僞類的標題轉移約了一下。訣竅是將您的頂部padding增加固定元素的高度，然後將它們從頂部margin減去相同的數量，將它們移回頁面。

所以，使用100像素的高固定件的例子，假設沒有存在於你的h3元素padding或margin，這裏的CSS會怎樣看：

h3:target{ 
    margin:-100px 0 0; 
    padding:100px; 
}

您可能需要調整這些值，取決於您的設計，在固定元素和標題之間添加一點空間。

來源

2015-05-20 14:35:24 Shaggy

謝謝沙吉。這種工作.. ;-) 我已經刪除了維護模式，所以你可以看看。請問剩下的，我還有很多事情要做;-) http://www.sanclerorganic.com/wordpress/ （後2015年7月跳過/ WordPress的）的CSS的主頁http：//位。ly/1HxkzvH 我已將修復程序應用於頂部的「關於我們」鏈接，並指向該部分的div的ID #aboutuswrap：target { margin：-155px 0 0 0; padding：155px 0 0 0; } 旁邊的「食譜」鏈接是我想要克服的 - 橫幅背後隱藏的目標。謝謝，傑里米 – WebsWonder

我已經找到了答案

您可以在工作中看到它

http://www.sanclerorganic.com/wordpress

導航欄上的鏈接代碼是

<a href="#recipeshomelink">Recipes</a>

和目標下來頁面是

<div style="position:relative;"> 
<div id="recipeshomelink" style="position:absolute; top:-115px;"></div> 
</div>

很明顯，-115px被調整以適應頂部酒吧的深度。

我希望這可以幫助他人。

傑里米

來源

2015-05-26 12:03:13 WebsWonder

使用頁內定位鏈接控制頁面的位置

回答

相關問題