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

Posted 2023-03-05

【中文标题】href="#" 转到页面顶部 - 阻止？ [复制]

【英文标题】：href="#" Going to Top of Page - Prevent? [duplicate]

【发布时间】：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>

【讨论】：

@phpSeeker 很高兴它对您有所帮助。

第四个解决方案帮助了我，因为我无法访问 js 脚本，谢谢

我也喜欢内联解决方案 :)

【参考方案4】：

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

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