哈希(#)链接为何会使页面跳转？

Question

好的，通常我对CSS很熟悉。但这个问题……我无法理解为什么会出现。

我确实找到了一些“快速修复”方法，但我不想只是为了做而做，如果有人能帮我理解这个异常，请站出来（我已经尝试在网上搜索了很多，但找不到任何相关内容）！

问题出在使用锚点链接时。我制作了一个演示页面以更好地解释发生了什么。

首先，进入这里：http://jsfiddle.net/GKCE6/5/show。看起来很好，对吧？

现在让我们添加URL中的井号（#）符号：http://jsfiddle.net/GKCE6/5/show/#some-content。标题就消失了！消失了！什么也没有了！！

有什么主意吗？我注意到，如果我从

中删除overflow:hidden规则，则标题会重新显示。然而，我正在处理的项目需要overflow:hidden规则以消除水平滚动。我可能可以做类似于overflow-x:hidden的处理，但就像我一开始说的那样，我宁愿尝试理解为什么会发生这种情况，以便确定适当的解决方法。

有其他人遇到过这种情况吗？

演示页面：http://jsfiddle.net/GKCE6/5

- SeeMeCode

---

我发现人们现在把那称为“井号”非常困扰... :( - tckmn

我同意@DoorknobofSnow的观点 - 不确定为什么我那样做了。我编辑了问题。 :) - SeeMeCode

Answer 1

你的代码问题在于 #container 的固定高度。内容超过了你设置的 1000px。当页面跳转到 #content 部分时，它会向下移动，浏览器会聚焦于填满整个 1000px 的内容部分。如果在 #container 上设置 height:auto，就可以解决这个问题。这样可以保持 overflow: hidden。

- 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

Answer 2

你的问题在于 overflow:hidden; 这一行代码。你需要这个。

overflow-x:hidden;

否则他们将无法在您的网站上阅读任何内容...overflow-x将停止水平滚动。

- codeaddict