Question

我对jQuery有一个普遍的问题。

我创建了几个jQuery按钮，但我遇到的问题是当你向下滚动页面一半而按下按钮时，页面会跳回到顶部，而不是停留在按钮位于的中间位置？ / p>

如何阻止这种情况发生，因为这对用户来说是令人沮丧的？

为什么会发生这种情况有什么特别的原因吗？

$(".comment-here").click(function() {
   $(".comment-form").slideToggle('slow');
});

$(".main-btn.orange").click(function(){
   $(".comment-form").slideUp('slow');
});

Answer 1

您没有阻止默认事件。由于您点击了锚标记，因此#的默认事件只是跳到文档的顶部。

为防止这种情况发生：

将事件传递给函数，并使用preventDefault（）;

$(".comment-here").click(function(e){
    e.preventDefault();
    $(".comment-form").slideToggle('slow');
})

$(".main-btn.orange").click(function(e){
    e.preventDefault();
    $(".comment-form").slideUp('slow');
})

您也可以使用return false;，而不仅仅是阻止默认事件，它会将事件bubbling停止到parent元素。

Answer 2

将return false;添加到<a class="comment-here">。

的点击处理程序中

本质上它不是jQuery，而是导致这种情况的默认浏览器行为：您单击了一个链接，它必须导航到其href，即"#"，即此页面。所以我们回到这个页面（顶部）。

Answer 3

防止锚标记的默认行为：

$(".comment-here").click(function(e){
    e.preventDefault();
    //....
});

Answer 4

问题在于<a>标记使用href="#"引用当前页面并将您拉到顶部。

我建议使用以下方法，而不是其他答案中提到的默认事件预防。当然那些工作，但为什么只使用一个元素来删除它的默认功能？

Ergo，使用专门用于您目的的东西：

1。）使用<button>代替<a>：

http://jsfiddle.net/RvHjx/7/

2。）如果您已经开始使用<a>，请删除href标记中的<a>属性。这将删除带蓝色下划线的链接样式（虽然链接仍能正常运行），但是使用一些CSS很容易修复：

http://jsfiddle.net/RvHjx/11/

Answer 5

添加javascript：;你的标签href是最简单的方法。

<a href="javascript:;">my link</a>

为什么jQuery会让我的页面在点击后跳回到顶部？

5 个答案: