使用哈希URL时不需要的页面跳转

时间:2012-01-20 18:07:46

标签: javascript html css page-jump

我已经在SO上查看了其他页面跳转问题,我没有找到任何匹配的内容,所以我们开始......

我正在构建一个使用CSS3过渡和一堆散列链接的网站,而不是使用jQuery来加载/转换不同的页面/元素(只是为了好玩/证明I / CSS可以)。我遇到的问题是,当我点击其中一个链接时,滚动条会自动跳过大约100px而没有明显的原因。

我不记得它一直这样做,所以也许我的CSS中的某些内容变得奇怪了。我还在顶部添加了一些<a name>标签以尝试将其重新启动,但这也不起作用。我尝试将onclick="window.scrollTo(0,0);"放入链接中,这也不起作用:(

任何想法/帮助都会很棒,因为每次导航到页面时都需要滚动才会非常烦人/可用性差。您可以查看页面here

系统信息:

浏览器:Chrome 16.0.912.75,FireFox 9.0.1,Opera 11.6

操作系统:Windows 7

2 个答案:

答案 0 :(得分:2)

我不熟悉CSS3过渡,所以我不完全理解你在做什么。但是:

  1. 我认为您发现这种不受欢迎的行为与浏览器根据URL中的片段标识符将元素滚动到视图中的本机行为有关。我不确定用<a name>元素覆盖是否会起作用,但无论如何你都错误地设置name值,方法是在它们前面添加一个哈希值。例如,<a name="about"></a>不是<a name="#about"></a>

  2. 至少出于调试目的,我会尝试添加click事件监听器并在其中调用preventDefault()以查看它是否停止滚动。

  3. 说明您遇到问题的浏览器(包括操作系统和版本)会很有帮助。

答案 1 :(得分:0)

请注意,它不仅仅是跳到一个随机位置,而是跳到具有哈希ID的元素。 (尝试将#footer添加到您网址的末尾)如果不在JavaScript中使用preventDefault,我认为您无法解决这个问题。