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

Question

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

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

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

Answer 1

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

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

Answer 2

在jQuery中，当你处理click事件时，返回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();
});

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

只需使用<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

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

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

Answer 9

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

根据Neothor的建议，跨度也是合适的，如果样式正确，则可以明显地看作是可以点击的项目。您甚至可以附加悬停事件，以便在用户的鼠标移动时使元素“亮起”。

然而，说到这一点，您可能需要重新考虑网站的设计，以便它在没有javascript的情况下运行，但在可用时通过javascript进行增强。

Answer 10

只需使用

<强>

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

JQUERY

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

Answer 11

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

Answer 12

与href =＆＃34;＃＆＃34;的链接;应该几乎总是用按钮元素替换：

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

使用带有href =＆＃34的链接;＃＆＃34;这也是一个可访问问题，因为屏幕阅读器可以看到这些链接，它们会读出＆＃34;链接 - 文本＆＃34;但如果用户点击它就不会去任何地方。

Answer 13

我一直用：

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

试图阻止页面跳转时。不确定这是否是最好的，但似乎多年来一直运作良好。

Answer 14

如果您想在不跳页的情况下迁移到同一页面上的锚点部分，请使用：

只需使用＆＃34;＃/＆＃34;而不是＆＃34;＃＆＃34;     例如

<?php
function year(){
    $select = "";
    $select .= '<select>';
    for ($i = 1998; $i<2015;){
        $select .= "<option>$i</option>";
        $i++;
    }
    return $select .= '</select>';
}

$try = year();
echo '<table border="1">';
    for ($row =1; $row < 11; $row++){
        if ($row % 2 == 0) {
            echo "<tr><td>$try</td></tr>";
        }
        else
        {
            echo "<tr><td>H</td></tr>"; 
        }
    }
echo '</table>';   

Answer 15

我用过：

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

Answer 16

你可以传递一个没有href属性的锚标记，并使用jQuery来执行所需的操作：

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

Answer 17

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

stopPropagation可防止事件上升到DOM树。更多信息：https://api.jquery.com/event.stoppropagation/

Answer 18

我使用这样的东西：

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

Answer 19

length技巧有效，但会向浏览器添加历史事件。因此，单击后退不起用户可能想要/期望的那样。

#/是我的方式，因为它适用于现有内容，以及加载后添加到DOM的所有元素。

具体来说，我需要在$('body').click('a[href="#"]', function(e) {e.preventDefault() }); (Reference)内的bootstrap下拉菜单中执行此操作，所以我做了：

.btn-group

这种方式是针对性的，并且不影响页面上的任何其他内容。

Answer 20

处理你的jquery后你也可以返回false。

例如

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

Answer 21

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

Answer 22

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

Answer 23

如果<a href="#!">Link</a>和<a href="#/">Link</a>必须多次单击同一输入，则它们将不起作用。.对于多个输入中的每个输入，只需进行一次事件单击。

最好的方法是使用<a href="#">Link</a>

然后

event.preventDefault();