回到页面顶部 - 如何避免？ href="#"

Question

我有一个包含一些jQuery函数的页面。页面上的HTML看起来像这样：

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

当我点击“打开”按钮时，一个隐藏的面板会滑出。jQuery本身工作得很好，但是当我点击按钮时，它也会带我到页面顶部。

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

注意：我可以添加ID并告诉 href 转到那个ID。但出于各种原因（包括添加不必要的代码），我不想这样做。

- L84

Answer 1

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

- MyroslavN

---

我认为这是一个锚点语法。滚动到ID为"!"的元素，但在文档中不存在ID为"!"的元素，因此浏览器不会滚动。参考链接：https://www.w3.org/TR/html4/struct/links.html#h-12.2.1 - MyroslavN

哇！最佳解决方案！非常感谢。我希望我能给它点赞10次！ - Segmentation Fault

自1996年以来一直在攻克HTML，但仍需不断学习。谢谢。 - Juergen Schulze

Code Sniffer（WCAG2AA标准）出现问题：未找到ID为“！”的项目。 - Aimal Khan

你太棒了！这是我在这里看到的最佳答案。哈哈 - Ken

Answer 2

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

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

- icktoofay

---

你可能还需要在代码块末尾使用 return false 来忽略浏览器默认的滚动到页面顶部。 - bafromca

绝对不需要。调用preventDefault就足够了；正如它的名字所示，它会阻止默认操作（跟随锚点并转到页面顶部）发生。return false也可以做到这一点，并且还相当于调用stopPropagation，它停止事件向父元素传播；但是，如果你只想阻止浏览器滚动到页面顶部，不需要使用return false。 - icktoofay

另一种解决方案是针对没有类别的链接，像 OP 一样 - $('a[href="#"]').click(function(e) {e.preventDefault(); }); - Grant

Answer 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>

- Ryan

---

@PHPSeeker 我很高兴能帮到你。 - Ryan

第四个解决方案对我很有帮助，因为我无法访问js脚本，谢谢。 - FritzB

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

Answer 4

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

return false重写了'a'标签的标准行为，当单击时它会阻止浏览器返回到页面顶部。

- Andreas