使用jQuery slidetoggle时，链接href="#"会滚动页面到顶部。

Question

可能有重复：
如何阻止单击触发javascript的链接时网页滚动到顶部？ 我正在使用jquery的slidetoggle来显示/隐藏divs。 控制滑动的元素是一个文本链接（在<\a>中包含一些文本），它具有href="#"，使其看起来像一个链接（有下划线，光标更改）。

问题在于，当单击链接时，除了滑动效果外，页面还会向上滚动。

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

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

非常感谢任何想法。

- samoyed

---

你可以使用 href="#id-of-choice" 将页面移动到具有 id="id-of-choice" 的元素。 - Prageeth Jayathissa

Answer 1

有几种选项：

1. 在您的点击处理程序底部放置 return false;，这样就不会跟随 href。
2. 将 href 更改为 javascript:void(0);

3. 在您的处理程序中调用事件的 preventDefault 方法：

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

- rfunduk

---

谢谢大家的回答。 我使用了 "return false" 并且它完美地工作了。 stackoverflow 真是太棒了！ - samoyed

很棒的解决方案thenduks，省了我很多麻烦=) - Zo Has

“return false;” 不是处理这个问题的正确方式。很多开发者懒得思考就会在事件处理程序的末尾抛出“return false;”，却不理解这种行为的后果。没有必要阻止事件传播。你只需要在这里防止用户代理的默认操作。因此，“preventDefault()”是正确的函数使用方法。 - Ray Nicholus

非常感谢！多个选项+1！ - normalUser

Answer 2

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

- SLaks

Answer 3

return false 或 event.preventDefault() 可以用于点击处理程序中，以防止默认操作。带有 href 属性值为 # 的 <a> 元素会导致浏览器默认跳转到页面顶部。

- Russ Cam

Answer 4

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

- slebetman