如何防止点击“#”链接跳转到页面顶部？
Posted
技术标签:
【中文标题】如何防止点击“#”链接跳转到页面顶部？【英文标题】：How to prevent a click on a '#' link from jumping to top of page? 【发布时间】：2011-03-16 05:28:51 【问题描述】：我目前正在使用带有 jQuery 的 <a> 标签来启动点击事件等事件。
例如<a href="#" class="someclass">Text</a>
但我讨厌“#”如何使页面跳转到页面顶部。我能做些什么呢？
【问题讨论】：
重复***.com/questions/720970/jquery-hyperlinks-href-value/… 我和 David Dorward 在一起，gargantaun 在链接的重复问题上。如果您的网站上有链接，则它们需要用作普通链接。如果 javascript 拦截它们并做一些不同的事情，一切都很好，但是你需要在那里有一个真实的链接，这会导致一个真实的页面。出于各种原因，这是必要的，其中最重要的是 SEO 和可访问性。 “愚蠢就是愚蠢”我们以前都去过那里:) 【参考方案1】：所以这是旧的但是......以防万一有人在搜索中找到它。
只要用"#/"代替"#"，页面就不会跳转了。
【讨论】：
正是我需要的！即使在您发表评论一年后，这对我也有帮助，所以谢谢克里斯 之所以有效，是因为它导航到名为/ 的锚点，而不是因为 #/ 有任何意义。你可以用#whateveryouwant 做同样的事情，它会阻止跳转到顶部
这应该是最佳答案。谢谢你。
@slang，虽然你是对的，这只是吹毛求疵，但我更喜欢使用“#/”而不是“#whateveryouwant”，因为“#/”的使用非常普遍，因此揭示意图（清洁代码）。不过，它仍然可以作为答案的补充。
当心 - 这会在浏览器历史记录中创建一条记录，因此单击返回不会执行用户认为在单击带有 #/ 或其他任何内容的链接后会执行的操作，例如#whatever.【参考方案2】：
在 jQuery 中，当您处理点击事件时，返回 false 以阻止链接以通常的方式响应 阻止发生默认操作，即访问 href 属性（根据 PoweRoy 的评论和Erik's answer)：
$('a.someclass').click(function(e)
// Special stuff to do when this link is clicked...
// Cancel the default action
e.preventDefault();
);
【讨论】：
@pranay：OP 指定他使用 jQuery 来处理这些链接。 不要返回 false，而是执行 event.preventDefault()。这对于阅读您的代码的人来说更清楚。 @PoweRoy：知道了。我进行了编辑并学到了一些新东西:) @BoltClock OP 应该使用按钮而不是锚点来处理点击事件。您的答案非常有用，但是如果 href 指向某个地方并且您现在不需要重定向 。防止根本不需要的默认行为是一种建议，例如：拿起刀，抓住刀片并使用手柄敲击钉子:) 为工作选择合适的工具！ 如果 jquery：$('a[href=#]').click(function(e) e.preventDefault(); );【参考方案3】：
你甚至可以这样写：
<a href="javascript:void(0);"></a>
我不确定它是更好的方法，但它是一种方法:)
【讨论】：
这种方法在 html 4 之前的版本中很好，但现在它是非常糟糕的做法，因为它破坏了太多导航操作，例如“在新标签中打开链接”。 你可能是对的，但是......在这种情况下，这并不重要，因为他正在提供一个 onclick 事件，所以在新标签中打开链接无论如何都不起作用...... 快捷方式是href='javascript:;'，但要小心它会触发IE中的window.beforeUnload事件
这可能会破坏他自己的功能？因为如果我这样做，我的渲染幻灯片的函数将不再被触发。【参考方案4】：
解决方案 #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>
【讨论】：
第一个解决方案是完美的。简短、干净、简单。这应该是公认的答案。谢谢！ 1 号是一个很棒的解决方案。谢谢！ 你不能改用$('a[href="#"]') 并避免使用someclass吗？
@ADTC 如果我们想应用于所有标签，这是一个非常好的解决方案。但我的回答与已经提出的问题一致，并且必须应用于特定标签。
那么问题就不清楚了。我读到它是因为提问者想要将它应用到所有这些上，而 someclass 只是碰巧出现在代码中。正如它所说：“我讨厌 '#' 使页面跳到页面顶部的方式。我能做些什么呢？” 在我看来，他希望全局更改它。 ?♂️（当不清楚是其中一种情况时，我只会在答案中提到这两种情况。毕竟，阅读您的答案的不仅是提问者，还有成千上万的其他访问者在寻找类似的解决方案问题。?)【参考方案5】：
您可以使用event.preventDefault() 来避免这种情况。在此处阅读更多信息：http://api.jquery.com/event.preventDefault/。
【讨论】：
【参考方案6】：只需使用<input type="button" /> 而不是<a> 并使用 CSS 设置样式，使其看起来像一个链接。
按钮是专门为点击而设计的，它们不需要任何 href 属性。
最好的方法是使用 onload 操作创建按钮并通过 javascript 将其附加到您需要的位置，因此禁用 javascript 后，它们根本不会显示，也不会混淆用户。
当您使用 href="#" 时，您会获得大量指向同一位置的不同链接，而当代理不支持 JavaScript 时，这些链接将不起作用。
【讨论】：
@kingjeffrey 但是什么也不做总比导航到# 好。【参考方案7】：
如果您想使用锚点，您可以使用http://api.jquery.com/event.preventDefault/，就像建议的其他答案一样。
您还可以使用任何其他元素，例如跨度并将点击事件附加到该元素。
$("span.clickable").click(function()
alert('Yeah I was clicked');
);
【讨论】：
【参考方案8】：$('a[href="#"]').click(function(e) e.preventDefault(); );
【讨论】：
能否添加一个简短的解释？ 在我看来，他正在为任何带有“#”href 的锚点添加点击处理程序。这样，您就不必搜索已有的所有点击处理程序并在其中添加 e.preventDefault()。【参考方案9】：你可以使用#0作为href，因为0不允许作为id，页面不会跳转。
<a href="#0" class="someclass">Text</a>
【讨论】：
这与使用#/ 相同，因此存在相同的问题：添加到浏览器历史记录。
@ADTC 这个问题不包括任何关于浏览器历史的内容。【参考方案10】：
随便用
<a href="javascript:;" class="someclass">Text</a>
JQUERY
$('.someclass').click(function(e) alert("action here");
【讨论】：
【参考方案11】：如果元素没有有意义的 href 值，那么它就不是真正的链接，那么为什么不使用其他元素呢？
正如 Neothor 所建议的那样，跨度也很合适，如果样式正确，它将作为一个可以单击的项目显而易见。你甚至可以附加一个悬停事件，当用户的鼠标在它上面移动时让元素“亮起来”。
不过，话虽如此，您可能需要重新考虑网站的设计，使其无需 javascript 即可运行，但在可用时通过 javascript 进行增强。
【讨论】：
【参考方案12】：带有 href="#" 的链接几乎总是应该用按钮元素替换：
<button class="someclass">Text</button>
使用带有 href="#" 的链接也是一个可访问性问题，因为这些链接将对屏幕阅读器可见，屏幕阅读器会读出“链接 - 文本”，但如果用户点击它就不会去任何地方。
【讨论】：
【参考方案13】：有4种类似的方法可以防止页面在没有任何JavaScript的情况下跳转到顶部：
选项 1：
<a href="#0">Link</a>
选项 2：
<a href="#!">Link</a>
选项 3：
<a href="#/">Link</a>
选项 4（不推荐）：
<a href="javascript:void(0);">Link</a>
但如果你在 jQuery 中处理点击事件，最好使用event.preventDefault()。
【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。【参考方案14】：#/ 技巧有效，但会向浏览器添加历史事件。因此，单击返回不会像用户希望/期望的那样工作。
$('body').on('click', 'a[href="#"]', function(e) e.preventDefault() ); 是我采用的方式，因为它适用于已经存在的内容，以及加载后添加到 DOM 的任何元素。
具体来说，我需要在 .btn-group(Reference) 内的引导下拉菜单中执行此操作，所以我这样做了：
$('body').on('click', '.dropdown-menu li a[href="#"]', function(e) e.preventDefault() );
这样是有针对性的，不会影响页面上的任何其他内容。
【讨论】：
很遗憾，这是错误的。不要使用此代码。 如果click 的第一个参数不是处理程序，则它是事件数据。它实际上并没有按预期选择a 标签。最终结果？您页面上的所有内容均已禁用！【参考方案15】：
你可以只传递一个不带 href 属性的锚标记，然后使用 jQuery 来执行所需的操作：
<a class="foo">bar</a>
【讨论】：
我一般不推荐这种方法，因为如果用户禁用了 js，就没有回退操作。但鉴于您已经将 href 设置为#，我认为这不是您关心的问题，因此提供了此解决方案，因为它可能是满足您需求的最简单方法。
a:link CSS 选择器不会定位到这个锚标记。
BoltClock，这是真的。但是 st4ck0v3rfl0w 并没有表示这样的需要。
那么也可以使用 。我相信维护 的重点是保持它的样式，这已经由常规 定义。如果没有 href，它就不会像其他 那样被检测和设置样式。
【参考方案16】：
我用过：
<a href="javascript://nop/" class="someClass">Text</a>
【讨论】：
【参考方案17】：我一直用：
<a href="#?">Some text</a>
试图阻止页面跳转时。不确定这是否是最好的，但它似乎多年来一直运行良好。
【讨论】：
【参考方案18】：您也可以在处理完 jquery 后返回 false。
例如。
$(".clickableAnchor").live(
"click",
function()
//your code
return false; //<- prevents redirect to href address
);
【讨论】：
该方法和 live 方法均已弃用，不应再使用。【参考方案19】：我使用这样的东西：
<a href="#null" class="someclass">Text</a>
【讨论】：
【参考方案20】：为了防止页面跳转，需要在调用e.preventDefault();之后再调用e.stopPropagation();：
stopPropagation 阻止事件向上爬上 DOM 树。更多信息在这里：https://api.jquery.com/event.stoppropagation/
【讨论】：
能否请您提供我可以粘贴到我的 html 中的完整代码？我正在使用 Zurb Foundation 5.5.3。【参考方案21】：如果您想在不跳转页面的情况下迁移到同一页面上的 Anchor Section：
只需使用“#/”而不是“#” 例如
<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..
【讨论】：
【参考方案22】：在# 之后添加一些内容会将页面的焦点设置为具有该 ID 的元素。最简单的解决方案是使用#/，即使您使用的是 jQuery。但是，如果您在 jQuery 中处理事件，event.preventDefault() 是要走的路。
【讨论】：
【参考方案23】：对我来说最简单的就是这样做。
<a href="#" onclick="return false;">Some text</a>
使用 JS 的原因是大多数现代网站都依赖它。
【讨论】：
【参考方案24】：<a href="#!">Link</a> 和 <a href="#/">Link</a> 如果必须多次单击同一个输入，则不起作用。它只针对多个输入的每个单击进行 1 次事件单击。
最好的办法还是<a href="#">Link</a>
那么，
event.preventDefault();
【讨论】：
以上是关于如何防止点击“#”链接跳转到页面顶部？的主要内容，如果未能解决你的问题，请参考以下文章