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

Question

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

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

你怎么能阻止这种情况发生，因为它会让用户感到沮丧？

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

jsFiddle Example :

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

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

Answer 1

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

为了防止这种情况发生:

将事件传入函数，并使用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; 代替，这比仅仅防止默认事件更进一步，它会停止事件 冒泡 直到 parent 元素。