href="#" 转到页面顶部 - 阻止？ [复制]答案

【问题标题】：href="#" Going to Top of Page - Prevent? [duplicate]href="#" 转到页面顶部 - 阻止？ [复制]
【发布时间】：2012-10-11 18:25:32
【问题描述】：

我有一个包含一些 jQuery 函数的页面。页面上的 HTML 如下所示：

<a href="#" class="service">Open</a>

当我单击“打开”按钮时，一个隐藏的面板会滑出。 jQuery 本身运行良好，但是当我单击按钮时，它也会将我带到页面顶部。

这是默认行为吗？如何防止每个 href="#" 将我带到页面顶部。

注意：我可以添加 id 并告诉 href 指向该 ID。由于各种原因（包括添加不必要的代码），我不想这样做。

【问题讨论】：

【解决方案1】：

<a href="#!" class="service">Open</a>

【讨论】：

我认为这是一种锚语法。滚动到 id="!" 的元素但是 id="!" 的元素文档中不存在，浏览器不滚动。 w3.org/TR/html4/struct/links.html#h-12.2.1
哇！最佳解决方案！非常感谢。我希望我能投票 10 次！
自 1996 年以来一直在攻克 HTML。仍然需要学习一些具体细节。谢谢
导致使用代码嗅探器（WCAG2AA 标准）出现问题：找不到 ID 为“！”的项目
到目前为止，这个 hack 比任何 JS 解决方案都要好，

【解决方案2】：

在您的事件处理程序中，添加e.preventDefault();（假设e 是保存事件的变量的名称）：

$('.service').click(function(e) {
    e.preventDefault();
});

【讨论】：

您可能还需要在代码块末尾使用return false 以忽略浏览器默认滚动到页面顶部。
@bafromca：绝对不是。调用preventDefault 就足够了；顾名思义，它可以防止发生默认操作（跟随锚点并转到页面顶部）。 return false 也这样做，也相当于调用 stopPropagation，顾名思义，它阻止事件传播到父元素；但是，如果您只想阻止浏览器滚动到页面顶部，则 不需要 return false。
另一种针对没有像 OP 这样的类的链接的解决方案 - $('a[href="#"]').click(function(e) {e.preventDefault(); });

【解决方案3】：

<a href="#" onclick="return false;" class="service">Open</a>

或

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function()
   {

       return false;

   });
});

或

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function(e)
   {

       e.preventDefault();

   });
});

或

<a href="#" onclick="event.preventDefault();" class="service">Open</a>

【讨论】：

【解决方案4】：

$('service').click(function() {
<your code>
return false;
});

return false 覆盖“a”标签的标准行为，并在单击时停止浏览器返回页面顶部。

【讨论】：