如何防止点击“#”链接跳转到页面顶部?

IT技术 javascript jquery html
2021-02-01 01:20:40

我目前正在使用<a>带有 jQ​​uery 的标签来启动点击事件等。

例子是 <a href="#" class="someclass">Text</a>

但我讨厌“#”如何让页面跳转到页面顶部。我可以做什么?

6个回答

所以这是旧的但是......以防万一有人在搜索中找到它。

只需使用"#/"代替,"#"页面就不会跳转。

正是我需要的!即使在您发表评论一年后,这对我也有帮助,所以谢谢 Chris
2021-03-21 01:20:40
这必须是最佳答案。坦白你。
2021-03-30 01:20:40
@slang,虽然你是对的,这只是吹毛求疵,但我更喜欢使用“#/”而不是“#whateveryouwant”,因为“#/”的使用非常普遍,因此可以揭示意图(干净的代码)。不过,它仍然可以作为答案的补充。
2021-04-02 01:20:40
之所以有效,是因为它导航到名为 的锚点/,而不是因为它#/具有任何意义。你可以做同样的事情,#whateveryouwant它会防止跳到顶部
2021-04-03 01:20:40
当心 - 这会在浏览器历史记录中创建一个记录,因此单击返回不会执行用户在单击链接#/或其他任何内容(例如#whatever.
2021-04-04 01:20:40

在jQuery中,当你处理点击事件时, 返回 false 以阻止链接以通常的方式响应防止发生默认操作,即访问href属性(根据 PoweRoy 的评论和Erik 的回答):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});
如果jQuery: $('a[href=#]').click(function(e) { e.preventDefault(); });
2021-03-13 01:20:40
@BoltClock OP 应该使用按钮来处理点击事件而不是锚点。您的回答非常有用,但在 href 指向某处而您目前不需要重定向的情况下防止根本不需要的默认行为行为是一种建议,例如:拿起刀,抓住刀片并使用手柄锤击钉子:) 为这项工作选择合适的工具!
2021-03-16 01:20:40
@PoweRoy:明白了。我进行了编辑并学到了一些新东西:)
2021-03-17 01:20:40
执行 event.preventDefault() 而不是 return false。这对于阅读你的代码的人来说更清楚。
2021-04-08 01:20:40
@pranay:OP 指定他使用 jQuery 来处理这些链接。
2021-04-10 01:20:40

你甚至可以这样写:

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

我不确定它是一种更好的方法,但它是一种方法:)

您可能是对的,但是.. 在这种情况下,这无关紧要,因为他提供了一个 onclick 事件,因此无论如何在新选项卡中打开链接都不起作用...
2021-03-14 01:20:40
这可能会破坏他自己的功能?因为如果我这样做,我的 func 渲染幻灯片将不再被触发。
2021-03-18 01:20:40
捷径是href='javascript:;'但要小心它在 IE 中触发 window.beforeUnload 事件
2021-03-31 01:20:40
这种方法适用于 HTML 4 之前的版本,但今天这是非常糟糕的做法,因为它破坏了太多导航操作,例如“在新选项卡中打开链接”。
2021-04-11 01:20:40

解决方案#1:(简单)

<a href="#!" class="someclass">Text</a>

解决方案#2:(需要javascript

<a href="javascript:void(0);" class="someclass">Text</a>

解决方案#3:(需要jQuery

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>
@ADTC 如果我们想应用到所有标签,这是一个非常好的解决方案。但我的回答与提出的问题一致,并且必须应用于特定标签。
2021-03-21 01:20:40
第一个解决方案是完美的。简短,干净,简单。这应该是公认的答案。谢谢!
2021-03-24 01:20:40
数字 1 是一个很棒的解决方案。谢谢!
2021-03-25 01:20:40
你不能这样做$('a[href="#"]')并避免使用someclass吗?
2021-03-25 01:20:40
那么问题就不清楚了。我读它作为提问者想要将它应用于所有这些,而someclass碰巧在代码中。正如它所说:“我讨厌'#'如何使页面跳转到页面顶部。我该怎么办?” 在我看来,他希望它在全球范围内改变。🤷‍♂️(如果不清楚是哪一种,我只会在答案中提及这两种情况。毕竟,阅读您答案的不仅是提问者,还有成千上万的其他访问者正在寻找类似问题的解决方案问题。🙂)
2021-04-11 01:20:40

您可以使用它event.preventDefault()来避免这种情况。在此处阅读更多信息:http : //api.jquery.com/event.preventDefault/