如何防止点击"#"链接跳转到页面顶部？

Question

我目前正在使用<a>带有jQuery的标签来启动点击事件等.

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

但是我讨厌'#'如何使页面跳到页面顶部.我该怎么做？

Answer 1

所以这是旧的但是......以防万一有人在搜索中发现这一点.

只需使用"#/"而不是"#"页面不会跳转.

Answer 2

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

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

    // Cancel the default action
    e.preventDefault();
});

Answer 3

你甚至可以像这样写它:

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

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

Answer 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>

Answer 5

你可以event.preventDefault()用来避免这种情况.点击此处了解更多信息:http://api.jquery.com/event.preventDefault/.

Answer 6

如果您愿意,只需使用CSS <input type="button" />代替<a>并使用CSS将其设计为链接.

按钮专门用于单击,它们不需要任何href属性.

最好的方法是使用onload操作来创建按钮,并通过javascript将其附加到您需要的位置,因此在禁用javascript的情况下,它们根本不会显示,也不会混淆用户.

当您使用时href="#",会有大量不同的链接指向同一位置,当代理不支持JavaScript时,这些链接将不起作用.

Answer 7

如果您想使用锚,可以像建议的其他答案一样使用http://api.jquery.com/event.preventDefault/.

您还可以使用任何其他元素(如span)并将click事件附加到该元素.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Answer 8

您可以使用#0href,因为0不允许作为id,页面不会跳转.

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

Answer 9

有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>

event.preventDefault()但如果您在 jQuery 中处理点击事件，则最好使用。

Answer 10

$('a[href="#"]').click(function(e) {e.preventDefault(); });