当点击触发 JavaScript 的链接时，如何阻止网页滚动到顶部？

您需要防止点击事件的默认操作(即导航到链接目标)发生。

有两种方法可以做到这一点。

选择1: event.preventDefault()

调用传递给处理程序的事件对象的 .preventDefault()方法。如果您使用 jQuery 绑定处理程序，那么该事件将是 jQuery.Event的一个实例，它将是 .preventDefault()的 jQuery 版本。如果使用 addEventListener绑定处理程序，那么它将是 Event和原始 DOM 版本的 .preventDefault()。无论哪种方式都能满足你的需要。

例子:

$('#ma_link').click(function($e) {
$e.preventDefault();
doSomething();
});


document.getElementById('#ma_link').addEventListener('click', function (e) {
e.preventDefault();
doSomething();
})

选择2: return false;

在 jQuery 中:

从事件处理程序返回 false 时，将自动调用 event.stop  传播()和 event.proventDefault ()

因此，使用 jQuery，您可以选择使用这种方法来防止默认的链接行为:

$('#ma_link').click(function(e) {
doSomething();
return false;
});

如果您使用的是原始 DOM 事件，那么这也可以在现代浏览器上使用，因为 HTML5规范规定了这种行为。但是，旧版本的规范没有这样做，所以如果您需要与旧版本浏览器的最大兼容性，应该显式地调用 .preventDefault()。有关规格细节，请参见 PreentDefault () vs return false (no jQuery)。

试试这个:

<a href="#" onclick="return false;">My Link</a>

首先链接到比页面顶部更合理的地方。然后取消默认事件。

参见 务实的渐进增强规则2。

从您正在调用的代码返回 false 将会起作用，在许多情况下，这是首选的方法，但是您也可以这样做

<a href="javascript:;">Link Title</a>

当涉及到搜索引擎优化，它真的取决于你的链接将被用于什么。如果你真的要用它来链接到其他内容，那么我同意理想情况下你会希望这里有一些有意义的东西，但如果你是为了功能目的而使用链接，可能像 Stack Overflow 对于文章工具栏(粗体、斜体、超链接等)所做的那样，那么它可能并不重要。

一种简单的方法是利用这段代码:

<a href="javascript:void(0);">Link Title</a>

这种方法不强制页面刷新，因此滚动条保持不变。此外，它还允许您以编程方式更改 onclick 事件，并使用 jQuery 处理客户端事件绑定。

基于这些原因，上述解决方案比:

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

当且仅当 myClickHandler 方法没有失败时，最后一个解决方案将避免滚动跳转问题。

如果可以简单地更改 href值，则应使用:

<a href="javascript:void(0);">Link Title</a>

我刚想到的另一个简洁的解决方案是使用 jQuery 来阻止单击操作的发生并导致页面滚动，但仅限于 href="#"链接。

<script type="text/javascript">
/* Stop page jumping when links are pressed */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>

您可以将 href 设置为 #!而不是 #

比如说,

<a href="#!">Link</a>

不会做任何滚动时点击。

小心！这仍然会在点击浏览器的历史记录中添加一个条目，这意味着在点击你的链接之后，用户的后退按钮不会将他们带到他们之前所在的页面。出于这个原因，最好使用 .preventDefault()方法，或者两者结合使用。