如果单击一个触发JavaScript的链接,如何阻止网页滚动到顶部？

Question

当我有一个与jQuery或JavaScript事件连接的链接,例如:

<a href="#">My Link</a>

如何防止页面滚动到顶部？当我从锚点中删除href属性时,页面不会滚动到顶部,但链接似乎不是可点击的.

Answer 1

您需要阻止发生单击事件(即导航到链接目标)的默认操作.

有两种方法可以做到这一点.

选项1: event.preventDefault()

调用.preventDefault()传递给处理程序的事件对象的方法.如果你使用jQuery来绑定你的处理程序,那么该事件将是一个实例,jQuery.Event它将是jQuery版本的.preventDefault().如果您正在使用addEventListener绑定处理程序,那么它将是一个Event原始DOM版本.preventDefault().无论哪种方式都可以满足您的需求.

例子:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

选项2: return false;

在jQuery中:

从事件处理程序返回false将自动调用event.stopPropagation()和event.preventDefault()

因此,使用jQuery,您也可以使用此方法来防止默认链接行为:

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

如果您正在使用原始DOM事件,这也适用于现代浏览器,因为HTML 5规范规定了这种行为.但是,旧版本的规范没有,因此如果您需要与旧版浏览器的最大兼容性,则应该.preventDefault()明确调用.有关规范详细信息,请参阅event.preventDefault()与return false(无jQuery).

Answer 2

您可以将href设置为#!而不是#

例如,

<a href="#!">Link</a>

点击时不会进行任何滚动.

谨防!这仍然会在单击时添加浏览器历史记录的条目,这意味着在单击链接后,用户的后退按钮将不会将它们带到之前所在的页面.出于这个原因,使用该.preventDefault()方法可能更好,或者两者结合使用.

这是一个小提琴,说明了这一点(只需将你的浏览器缩小,直到你得到一个滚动条):http:
//jsfiddle.net/9dEG7/

对于规范书呆子 - 为什么这样做:

此行为在导航到片段标识符部分下的HTML5规范中指定.带有href的链接"#"导致文档滚动到顶部的原因是此行为被显式指定为处理空片段标识符的方式:

2.如果fragid是空字符串,则文档的指示部分是文档的顶部

使用href "#!"代替工作只是因为它避免了这个规则.没有什么魔术有关的感叹号-它只是使一个方便的片段标识符,因为它是一个典型的fragid明显不同,不可能永远匹配id或name您的页面上的元素的.实际上,我们可以在哈希之后放几乎任何东西; 这是不够的唯一fragids是空字符串,字"顶",或者匹配字符串name或id页面元素的属性.

更确切地说,我们只需要一个片段标识符,它将使我们在以下算法中进入步骤8,以便从fragid中确定文档的指示部分:

1. 将URL解析器算法应用于URL,并将fragid作为生成的已解析URL的片段组件.

2. 如果fragid是空字符串,则文档的指示部分是文档的顶部; 在这里停止算法.

3. 让我们fragid bytes成为百分比解码的结果fragid.

4. 让我们decoded fragid将UTF-8解码器算法应用于fragid bytes.如果UTF-8解码器发出解码器错误,则中止解码器,然后跳转到标记的步骤no decoded fragid.

5. 如果DOM中的元素具有完全等于的ID decoded fragid,则树顺序中的第一个这样的元素是文档的指示部分; 在这里停止算法.

6. 没有解码的fragid:如果DOM中有一个元素,它的name属性值正好等于fragid(notdecoded fragid),那么树顺序中的第一个这样的元素就是文档的指示部分; 在这里停止算法.

7. 如果fragid是字符串的ASCII不区分大小写匹配top,则文档的指示部分是文档的顶部; 在这里停止算法.

8. 否则,文档中没有指明的部分.

只要我们点击步骤8并且文档中没有指示部分,就会出现以下规则:

如果没有指示的部分......那么用户代理必须什么都不做.

这就是浏览器不滚动的原因.

Answer 3

一种简单的方法是利用此代码:

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

此方法不会强制页面刷新,因此滚动条保持不变.此外,它允许您以编程方式更改onclick事件并使用jQuery处理客户端事件绑定.

由于这些原因,上述解决方案优于:

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

当且仅当myClickHandler方法没有失败时,最后一个解决方案将避免滚动跳转问题.

Answer 4

从您正在调用的代码返回false将起作用,并且在许多情况下是首选方法,但您也可以这样做

<a href="javascript:;">Link Title</a>

当涉及到SEO时,它实际上取决于你的链接将被用于什么.如果您打算实际使用它链接到其他一些内容,那么我会同意理想情况下你会想要一些有意义的东西但是如果你使用链接用于功能目的可能像Stack Overflow那样用于帖子工具栏(粗体,斜体,超链接)等等)然后它可能没关系.

Answer 5

你应该改变

<a href="#">My Link</a>

至

<a href="javascript:;">My Link</a>

这样,当单击链接时,页面将不会滚动到顶部.这比使用href ="#"更清晰,然后阻止默认事件运行.

我对第一个答案很好的理由对这个问题,就像return false;如果调用的函数抛出一个错误将不执行,或者可能添加return false;到doSomething()函数,然后忘了使用return doSomething();

Answer 6

试试这个:

<a href="#" onclick="return false;">My Link</a>

Answer 7

如果您可以简单地更改该href值，则应使用：

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

我刚刚想出的另一个巧妙的解决方案是使用 jQuery 来阻止单击操作发生并导致页​​面滚动，但仅限于href="#"链接。

<script type="text/javascript">
    /* Stop page jumping when links are pressed */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Answer 8

首先链接到比页面顶部更合理的内容。然后取消默认事件。

见务实渐进增强规则2 。