点击链接时页面意外向上滚动

Question

我写了一个HTML页面，主要在iPad上查看。基本上它是一个带有每个问题悬停效果的FAQ列表。为了在iPad上启动悬停效果，我不得不像这样放置一个虚拟链接。

<a href="#">The question?</a>

这是一个适用于所有浏览器的问题：当列表过长需要滚动时，如果你点击页面底部的链接，它会跳回顶部并启动悬停效果。我为演示目的制作了一个 fiddle：

http://jsfiddle.net/SWXHR/1/

在向下滚动并单击最后一个链接时，页面会跳转到顶部。

问题：如何防止使用虚拟链接时页面跳转到顶部？

- aydio

---

如果它不是超链接，为什么要填写href属性？你可能在误用某些东西。http://developers.whatwg.org/text-level-semantics.html#the-a-element - ANeves

感谢指出。我知道我在误用它，但是我不知道有任何适用于触摸的替代hover伪类的东西。也许有人可以指点我正确的方向？ - aydio

:hover可以应用于任何元素。如果这是你唯一的问题，你可以将a替换为span。我会发布一个答案。 - ANeves

Answer 1

将这个添加到您的链接中：

<a href="#" onClick="return false;">The question?</a>

或者如果你是通过JQuery来做的：

$('a[href="#"]').click(function(event){

    event.preventDefault();

});

- Sagar Patil

---

不要破坏其他链接：$('a[href="#"]').click(...); - 这只应该针对到 # 的超链接，如 http://www.w3.org/TR/css3-selectors/#selectors 所述。 - ANeves

好的，我已经添加了一个通用代码以根据需要使用。不过，我已经编辑了我的回答。 - Sagar Patil

Answer 2

添加到锚点标签

onclick="return false;"

这将会停止它

- Lee

Answer 3

您可以使用 <a href="javascript:;">The question</a>，它不会执行任何操作（空的 JavaScript 命令），并且您的滚动条将保持在原地 ;)

- veritas

Answer 4

如果您只想要悬停效果，根本不需要使用 a。

您可以使用 spans 并替换 CSS 以使其针对 spans：http://jsfiddle.net/SWXHR/6/

如果您想让光标像锚点一样，您可以使用 CSS 实现 - cursor: pointer;

- ANeves

---

这不会在iPad上触发悬停效果 - 我必须设置一个锚点。 - aydio

1. 你能解释一下你所说的“iPad上的悬停效果”是什么意思吗？
2. 有没有相应的CSS选择器可以实现这个效果？比如:focus或者:active？
3. 由于iPad没有指针设备，那你是如何实现“悬停”效果的呢？

- ANeves

Answer 5

只需要将单个 '#' 替换为双 '##' 即可。

<a href="##">这是问题啊？</a>

- Brenton Scott