与 jquery slidetoggle 一起使用时，带有 href="#" 的链接将页面滚动到顶部 [重复]答案

【问题标题】：link with href="#" scrolls page to top when used with jquery slidetoggle [duplicate]与 jquery slidetoggle 一起使用时，带有 href="#" 的链接将页面滚动到顶部 [重复]
【发布时间】：2011-01-02 17:15:52
【问题描述】：

可能重复：
How do I stop a web page from scrolling to the top when a link is clicked that triggers javascript?

我正在使用 jquery 的滑动切换来显示/隐藏 div。控制滑动的元素是一个文本链接（里面的一些文本）它有 href="#" 所以它看起来像一个链接（下划线，光标更改）。

问题是点击链接的时候，除了滑动效果，页面滚动到顶部。

我尝试用 href="" 替换 href="#" 但这会禁用 div 显示/隐藏效果。我想我可以添加到标签 Name="somename" 然后将 href 设置为 href="#somename" 但我宁愿不使用这样的技巧。

为什么 href="#" 将页面滚动到顶部？

任何想法都将受到高度赞赏

【问题讨论】：

您可以使用href="#id-of-choice" 将页面移动到带有id="id-of-choice" 的元素

标签： jquery scroll toggle href slide

【解决方案1】：

几个选项：

将return false; 放在点击处理程序的底部，href 将不会被跟随。
将href改为javascript:void(0);

在处理程序中的事件上调用preventDefault：

function( e ) {
  e.preventDefault();
  // your event handling code
}

【讨论】：

谢谢大家的回答。我使用了 return false 并且它完美地工作 stackoverflow 太棒了！
优秀的解决方案 thennduks，为我省去了很多麻烦=)
return false; 不是处理此问题的正确方法。开发人员经常在事件处理程序的末尾懒洋洋地抛出return false;，而不了解此操作的后果。没有理由阻止事件的传播。您在这里需要做的就是阻止用户代理的默认操作。所以，preventDefault() 是在这里使用的正确函数。
我没想到 :)
非常感谢！ +1 多个选项！

【解决方案2】：

您需要将return false; 添加到您的点击处理程序。
这将阻止浏览器执行点击的默认操作。

【讨论】：

【解决方案3】：

其他人已经给了你解决方案。但为了具体回答您的问题，# 指的是当前页面。由于标签的解释是将标签的 top 带到视图中，因此单击 # 标签会将您滚动到当前页面的顶部。

【讨论】：

【解决方案4】：

return false 或 event.preventDefault() 是您在单击事件处理程序中需要的，以防止发生默认操作。带有href 或# 的<a> 元素将导致浏览器视口作为默认操作跳转到页面顶部

【讨论】：