哈希(#)链接导致内容跳跃 - 为什么?

时间:2014-01-17 00:23:51

标签: html css

好的,通常我对CSS非常好。但是这一个...我无法完全理解为什么会发生这种情况。

我确实找到了几个'快速修复',但我不想只是为了做某事而做某事,所以如果有人能帮我理解这个异常,请挺身而出(我试过搜索网络高低,并没有找到任何关于这个)!!

使用哈希(#)/锚点链接时会出现此问题。我把小提琴放在一起,以便更好地解释发生了什么。

首先,请到这里:http://jsfiddle.net/GKCE6/5/show。看起来不错,对吧?

现在让我们将哈希(#)符号添加到URL:http://jsfiddle.net/GKCE6/5/show/#some-content。标题就消失了!走了!纳达!!

有什么想法吗?我注意到,如果我从overflow:hidden中删除div#container规则,则标题会返回。但是,我正在处理的项目需要overflow:hidden规则来消除水平滚动。我可以做一些像overflow-x:hidden这样的事情,但就像我在开始时所说的那样,我宁愿尝试理解为什么会这样,所以我可以确定适当的修复。

其他人之前遇到过这种情况吗?

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

2 个答案:

答案 0 :(得分:5)

您的代码问题是#container上的固定高度。内容大于您设置的1000px。当页面跳转到#content部分时,向下移动浏览器会关注填充整个1000px的内容部分。如果您在height:auto上设置#container,那么它就可以正常运行。这样您就可以保留overflow: hidden

答案 1 :(得分:0)

你的问题是溢出:隐藏;你想要这个

overflow-x:hidden;

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