哈希（＃）鏈接導致內容跳轉 - 爲什麼？

好吧，通常我對CSS很好。但是這個......我無法完全理解爲什麼它會發生。哈希（＃）鏈接導致內容跳轉 - 爲什麼？

我確實發現了幾個'快速修復'，但我不想只是爲了做某件事而做某些事情，所以如果有人能夠幫助我理解這個異常，請出面（我已經嘗試過高低搜索網頁，找不到任何關於此的內容）！

使用散列（＃）/錨鏈接時會發生此問題。我已經把小提琴放在一起，以更好地解釋發生了什麼。

首先，去這裏：http://jsfiddle.net/GKCE6/5/show。看起來不錯，對吧？

現在讓我們將哈希（＃）符號添加到URL：http://jsfiddle.net/GKCE6/5/show/#some-content。標題消失了！走了！納達！

任何想法？我注意到，如果我從div#container中刪除overflow:hidden規則，則標題返回。但是，我正在處理的項目需要使用overflow:hidden規則來消除水平滾動。我大概可以做一些類似於overflow-x:hidden的事情，但就像我在開始時所說的那樣，我寧願試着理解爲什麼會發生這種情況，以便我可以確定適當的修復方法。

其他人碰到過嗎？

小提琴：http://jsfiddle.net/GKCE6/5

來源

2014-01-17 SeeMeCode

我覺得它非常令人不安，人們稱之爲「hashtag」現在... :( – Doorknob

我同意@ DoorknobofSnow-不知道爲什麼我這樣做。我編輯了這個問題。:) – SeeMeCode

您的代碼存在的問題是#container上的固定高度。內容大於您設置的1000px。當頁面跳轉到#content部分時，瀏覽器向下移動將集中在填充整個1000px的內容部分。如果你在#container上設置了height:auto，它就可以工作。這將允許你保持overflow: hidden

來源

2014-01-17 00:34:53 SkyOut

+1，打我吧！此外，可以將'height：1000px;'改爲'min-height：1000px;' – Ming

嘿，男士，感謝您的關注！ FF中仍然存在一個小問題（這是此問題的起源地），但我打開了[另一個問題]（http://stackoverflow.com/questions/21175992/top-of-page-slightly-cutoff- when-using-hashtag-anchor-links-ff-only），因爲你花時間回答了這個問題。 :) – SeeMeCode

你的問題是與溢出：隱藏;你想要這個

overflow-x:hidden;

否則他們將無法讀取您的網站上的任何內容。溢出x將停止水平滾動。

來源

2014-01-17 00:34:00 codeaddict

哈希（＃）鏈接導致內容跳轉 - 爲什麼？

回答

相關問題