哈希（＃）链接导致内容跳跃 - 为什么？ [英] Hash(#) Link Causes Content To Jump - Why?

问题描述

好的，所以通常我很好的CSS。但是这一个...我不能包装我的前面为什么发生。

我找到了几个快速修复，但我不想只是为了做某事，所以如果有人可以帮助我理解这个异常，请前进（我试图搜索网络的高低，并找不到任何关于这个）。

使用hash （＃）/锚链接。

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

现在让我们在网址中加入哈希（＃）符号： http://jsfiddle.net/GKCE6/5/show/#some-content 。标题只是消失了！走了！ Nada !!

任何想法？我注意到，如果我从 div＃container 中删除​​ overflow：hidden 我正在开发的项目需要 overflow：hidden 规则来消除水平滚动。我可以做一些像 overflow-x：hidden ，但像我在开始时说的，我宁愿尝试理解为什么这种情况发生，所以我可以确定适当的修复

//jsfiddle.net/GKCE6/5rel =nofollow> http://jsfiddle.net/GKCE6/5

解决方案

您的代码的问题是 #container 的固定高度。内容大于您设置的 1000px 。当页面跳转到 #content 部分时，它向下移动浏览器的重点是内容部分填充整个 1000px 。如果你在 #container 上设置 height：auto ，它会工作。这将允许您保留 overflow：hidden

Ok, so usually I'm pretty good with CSS. But this one... I can't quite wrap my ahead around why it's occurring.

I did find a couple of 'quick fixes', but I don't want to just do something for the sake of doing something, so if anyone can help me understand this anomaly, please come forward (I've tried searching the web high and low, and can't find anything about this)!!

The issue occurs when using hash(#)/anchor links. I've put together a Fiddle to better explain what's happening.

First, go here: http://jsfiddle.net/GKCE6/5/show. Looks good, right?

Now lets add the hash(#) symbol to the URL: http://jsfiddle.net/GKCE6/5/show/#some-content. The header just disappears! Gone! Nada!!

Any ideas? I noticed that if I remove the overflow:hidden rule from the div#container, the header comes back. The project I'm working on, though, needs the overflow:hidden rule to eliminate horizontal scrolling. I could probably do something like overflow-x:hidden, but like I said in the beginning, I would rather try to understand why this is happening so I can determine the appropriate fix.

Anyone else run into this before?

Fiddle: http://jsfiddle.net/GKCE6/5

解决方案

The problem with your code is the fixed height on the #container. The content is greater than the 1000px you had set. When the page is jumping to the #content section its moving down the browser focuses on the content section which fills the entire 1000px. If you set height:auto on the #container it'll work. This will allow you to keep the overflow: hidden

这篇关于哈希（＃）链接导致内容跳跃 - 为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！