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

Question

关于jQuery，我有一个一般性的问题。

我创建了几个jQuery按钮，但问题是，当您在页面向下滚动一半，按下按钮时，页面会跳回顶部，而不是停留在按钮所在的中间？

您如何才能阻止这种情况发生，因为它是令用户沮丧的？？

有什么特别的原因吗？

jsFiddle实例

$(".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();
    //....
});