如何防止点击“＃”链接跳到页面顶部？

我目前<a>在jQuery中使用标签来启动诸如点击事件之类的事情。

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

但是我讨厌'＃'如何使页面跳到页面顶部。我该怎么办？

在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();
});

所以这很古老，但是...以防万一有人在搜索中找到它。

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

您甚至可以这样写：

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

林不知道它是一个更好的方法，但它是一种方法:)

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

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

只需使用<input type="button" />代替，<a>然后使用CSS设置样式即可使其看起来像一个链接（如果您愿意）。

按钮是专门为单击而制作的，它们不需要任何href属性。

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

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

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

您还可以使用任何其他元素（例如跨度），并将click事件附加到该元素。

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

您可以将其#0用作href，因为0不允许将其用作ID，因此页面不会跳转。

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

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

只需使用

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

如果该元素没有有意义的href值，那么它实际上不是链接，那么为什么不使用其他元素呢？

正如Neothor所建议的那样，跨度是适当的，并且如果设置正确的样式，则可以作为单击项明显可见。您甚至可以附加一个悬停事件，以在用户的​​鼠标移到上方时使它“照亮”。

但是，话虽如此，您可能需要重新考虑您网站的设计，使其不使用javascript即可运行，但是在可用时可以通过javascript进行增强。

带有href =“＃”的链接几乎应始终替换为button元素：

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

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

您可以只传递没有href属性的锚标记，然后使用jQuery进行所需的操作：

<a class="foo">bar</a>

我用过了：

<a href="javascript://nop/" class="someClass">Text</a>

该#/技巧有效，但是将历史事件添加到浏览器。因此，单击后退不起作用，因为用户可能希望/期望这样做。

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); 是我采用的方式，因为它适用于现有内容，并且在加载后将任何元素添加到DOM。

具体来说，我需要在.btn-group（Reference）内的引导下拉菜单中执行此操作，所以我做了：

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

这样，它就成为目标，并且不会影响页面上的其他任何内容。

我一直使用：

<a href="#?">Some text</a>

尝试防止页面跳转时。不知道这是否是最好的方法，但是似乎已经运行了好多年。

有四种类似的方法可以防止没有任何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中处理click事件，最好使用。

您还可以在处理完jQuery后返回false。

例如。

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

我用这样的东西：

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

为防止页面跳动，您需要在致电e.stopPropagation();后致电e.preventDefault();：

stopPropagation防止事件沿DOM树上升。此处提供更多信息：https : //api.jquery.com/event.stoppropagation/

如果要迁移到同一页面上的“锚定部分”而又不向上跳，请使用：

只需使用“＃/”代替“＃”即可

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

之后添加一些东西，#将页面焦点设置到具有该ID的元素上。#/即使使用jQuery，最简单的解决方案是使用。但是，如果要在jQuery中处理事件，event.preventDefault()则是一种方法。

该<a href="#!">Link</a>和<a href="#/">Link</a>不工作，如果一个人在同一个输入点击超过一次..它只是发生在1次时点击每多投入。

仍然最好的方法是 <a href="#">Link</a>

然后，

event.preventDefault();