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

我目前使用jQuery的<a>标签来启动像点击事件等事情。

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

但我讨厌“#”使页面跳转到页面顶部。我能做什么呢?

当前回答

为了防止页面跳转，你需要调用e.s stoppropagation ();在调用e.b epreventdefault()之后:

stopPropagation阻止事件沿着DOM树向上移动。更多信息请访问:https://api.jquery.com/event.stoppropagation/

其他回答

解决方案#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>

如果你想要迁移到同一页面上的锚节，而不需要页面跳转，请使用:

只要用“#/”而不是“#” 如

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

如果元素没有有意义的href值，那么它就不是真正的链接，那么为什么不使用其他元素呢?

正如Neothor所建议的那样，如果样式正确，span将作为一个可以点击的项目而显而易见。你甚至可以附加一个悬停事件，让元素在用户鼠标移动时“亮起”。

然而，话虽如此，你可能想要重新考虑你的网站的设计，这样它就可以在没有javascript的情况下运行，但在有javascript时可以通过javascript进行增强。

只需使用<input type="button" />而不是<a>，并使用CSS样式它看起来像一个链接，如果你愿意。

按钮是专门用于单击的，它们不需要任何href属性。

最好的方法是使用onload动作来创建按钮，并通过javascript将其附加到需要的位置，因此禁用javascript后，它们根本不会显示，也不会使用户感到困惑。

当您使用href="#"时，您会得到大量指向相同位置的不同链接，当代理不支持JavaScript时，这将不起作用。

有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()。

推荐文章