錨鏈接跳過太遠

在一個網站上，我目前的工作，我定義了一個«跳到內容»-Link與下面的標記：錨鏈接跳過太遠

<a href="#content" id="skip-to-content">Skip to content</a>

我把這個鏈接之外的某處視口，使用CSS position: absolute。只要有人關注鏈接（當通過頁面«tabbing»時），鏈接就會移回到視口，並將下面的內容往下推，這樣就可以獲得所需的空間。

#skip-to-content { 

    display: block; 
    text-align: center; 
    position: absolute; 
    top: -999px; 

} 

#skip-to-content:focus { 
    position: static; 
    outline: 0 none; 
    border: 1px solid #681; 
    top: 0; 
}

如果你現在點擊鏈接，我的瀏覽器跳轉到內容正確，但在那之後的鏈接失去焦點，所以內容再次滑落了一點點（因爲上面的鏈接被移出視口再次）。所以最後，你需要向上滾動一下才能看到內容的開始。看起來，好像錨鏈接會跳過太多。

有沒有什麼辦法可以確定，鏈接總是跳到內容而不是下面的一些像素？

請不要提示任何JavaScript解決方案，這是需要在每個瀏覽器中工作的基本功能。謝謝你的幫助。

- 安德烈

來源

2011-04-24 anroesti

你能發佈一個鏈接到網站？ – Flash 2011-04-24 09:37:19

http://www.albertroesti.ch/ （當頁面已加載時，按TAB一次） – anroesti 2011-04-24 09:38:43

您遇到什麼瀏覽器問題？在FF中我看起來不錯。 – Flash 2011-04-24 09:43:01

雖然不是一個完美的解決方案，你可以添加以下到您的CSS，它可能給你如何解決它的想法。

#content { 
    margin-top: -60px; 
    padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/ 
}

其中60px是跳過鏈接可見時的近似添加高度。這只是將#content的頂部邊緣稍微移動一下。您可以嘗試不同的測量方法以將填充返回到需要的位置。我不想提出封裝div或其他任何東西，但是這可能會爲您提供最初的精確的1.1em頂部填充。

如果您可以計算鏈接可見時的確切總增加高度，請在em s中使用該測量值而不是px。

來源

2011-04-24 09:57:55

該解決方案的缺點是不使用跳過鏈接的訪問者仍然會看到頂部間距。但是我想我會和這個一起去的。 – anroesti 2011-04-24 14:30:47

他們不應該看到它。填充抵消了負邊距，你只會看到如果有一個背景或邊框，我沒有看到你的情況的差異。您需要對此解決方案進行微調，這更多的是爲您提供實現解決方案的方法。 – 2011-04-24 14:35:06

哦，你說得對，這個想法聽起來不錯！ :) – anroesti 2011-04-24 14:44:14

您可能無法將您的:focus規則中的位置重置爲static。

來源

2011-04-24 14:00:00

這樣，跳過鏈接將顯示在我不想要的其他元素之上。儘管如此，感謝您的回覆。 – anroesti 2011-04-24 14:31:39

是的，這打破了目的。 – 2011-04-24 14:36:07

錨鏈接跳過太遠

回答

相關問題