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

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

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

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

当前回答

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

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

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

其他回答

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

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

带有href="#"的链接几乎总是应该被按钮元素替换:

<button class="someclass">Text</button>

使用带有href="#"的链接也是一个可访问性问题，因为这些链接将对屏幕阅读器可见，屏幕阅读器将显示“链接-文本”，但如果用户单击它，它不会去任何地方。

#/技巧有效，但会向浏览器添加一个历史事件。因此，点击返回并不能像用户希望的那样工作。

美元(的身体)。(“点击”,“(href = " # "],函数(e) {e.preventDefault ()});是我去的方式，因为它适用于已经存在的内容，以及加载后添加到DOM的任何元素。

具体来说，我需要在.btn-group(Reference)中的引导下拉菜单中做到这一点，所以我做了:

美元(的身体)。('点击','。下拉菜单li a[href="#"]'， function(e) {e.f preventdefault ()});

这样它是有针对性的，并且不会影响页面上的任何其他内容。

在#之后添加内容将页面的焦点设置为具有该ID的元素。最简单的解决方案是使用#/，即使你使用的是jQuery。但是如果你在jQuery中处理事件，event. preventdefault()是可行的方法。

这是旧的，但是。以防有人在搜索中发现这个。

只要使用“#/”而不是“#”，页面就不会跳转。

推荐文章