单击#-links时,避免窗口跳转到顶部

Question

我有一个包含一些问题和答案的页面,默认情况下答案是折叠的.当他们点击问题时,我展开隐藏的答案-div.问题是,当我单击这些问题时,窗口会跳到屏幕顶部.这不是一个大问题,但我觉得很烦人,因为我不得不再次向下滚动这个问题.

链接看起来像这样:

<a href="#" id="myID">Myquestion</a>

我使用jQuery和.click事件监听器.

有没有简单的方法来避免这种情况,或者我是否必须使用.scroll并找到问题的坐标？我宁愿避免这种情况.

编辑:我知道我可以使用锚来做这件事,但我想避免任何跳跃的屏幕.

Answer 1

您需要添加preventDefault()到您的点击处理程序.这将阻止浏览器执行它自己的链接处理程序,并且只运行您指定的代码.

例:

$("#myID").click(function(e) {
    e.preventDefault();
    // Do your stuff
});

Answer 2

不要将A标签用于与导航无关的任务.它不是语义标记,也不会优雅地降级.改用按钮.

Answer 3

您可以非常简单地做到这一点：只需!在您的末尾添加href：

<a href="#!" id="myID">Myquestion</a>

替代的 jQuery 方法是：

$("#myID").click(function(e) {
    e.preventDefault(); // one way 
    return false; // second way prevent default click action from happening
});