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

时间：2009-10-21 16:20:19

标签： javascript html

当我有一个与jQuery或JavaScript事件连接的链接时，例如：

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

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

15 个答案:

答案 0 :(得分：191)

您需要阻止点击事件的默认操作（即导航到链接目标）发生。

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

选项1：event.preventDefault()

调用传递给处理程序的事件对象的.preventDefault()方法。如果您使用jQuery绑定处理程序，那么该事件将是jQuery.Event的实例，它将是.preventDefault()的jQuery版本。如果您使用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;

In jQuery：

  

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

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

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

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

答案 1 :(得分：155)

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

例如，

<a href="#!">Link</a>
单击时

不会进行任何滚动。

小心！点击后，这仍然会在浏览器的历史记录中添加一个条目，这意味着点击链接后，用户的后退按钮不会将他们带到之前的页面。因此，最好使用.preventDefault()方法，或将两者结合使用。

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

对于规范书呆子 - 为什么会这样：

此行为在Navigating to a fragment identifier部分下的HTML5规范中指定。 href为"#"的链接导致文档滚动到顶部的原因是此行为被明确指定为处理空片段标识符的方式：

  

2。如果 fragid 是空字符串，那么文档的指示部分就是文档的顶部

使用"#!"的href工作只是因为它避免了这个规则。感叹号并没有什么神奇之处 - 它只是一个方便的片段标识符，因为它与典型的片段明显不同，并且不太可能匹配页面上元素的id或name。实际上，我们可以在哈希之后放几乎任何东西;唯一不足够的碎片是空字符串，单词“top”或与页面上元素的name或id属性匹配的字符串。

更确切地说，我们只需要一个片段标识符，这将导致我们在以下算法中进入步骤8，以确定来自fragid的文档的指示部分：

  
      

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

    2.   

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

    3.   

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

    4.   

  4. 让 decoded fragid 是将UTF-8解码器算法应用于 fragid bytes 的结果。如果UTF-8解码器发出解码器错误，请中止解码器，然后跳转到标记为 no decoded fragid 的步骤。

    5.   

  5. 如果DOM中的某个元素的ID完全等于 decoded fragid ，那么树顺序中的第一个元素就是文档的指示部分;在这里停止算法。

    6.   

  6. 没有解码的fragid ：如果DOM中有一个元素，其name属性的值完全等于 fragid （ not decoded fragid ），那么树顺序中的第一个这样的元素是文档的指示部分;在这里停止算法。

    7.   

  7. 如果 fragid 是字符串top的ASCII不区分大小写的匹配项，那么文档的指定部分就是文档的顶部;在这里停止算法。

    8.   

  8. 否则，文件中没有明确的部分。

    9.   

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

  

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

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

答案 2 :(得分：26)

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

<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方法没有失败时，最后一个解决方案才能避免滚动跳转问题。

答案 3 :(得分：11)

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

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

当谈到搜索引擎优化时，它实际上取决于你的链接将被用于什么。如果您打算实际使用它链接到其他一些内容，那么我会同意理想情况下你会想要一些有意义的东西但是如果你使用链接用于功能目的可能像Stack Overflow那样用于帖子工具栏（粗体，斜体，超链接）等等）然后它可能没关系。

答案 4 :(得分：7)

你应该改变

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

到

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

这样，当点击链接时，页面将不会滚动到顶部。这比使用href =“＃”更清晰，然后阻止默认事件运行。

我在this question的第一个答案中有充分的理由，如果被调用的函数抛出错误，return false;将无法执行，或者您可以将return false;添加到doSomething() return doSomething();功能，然后忘记使用<!DOCTYPE html> <html ng-app="myApp" ng-controller="myCtrl"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <script src="FileSaver.js"></script> <script> function start_scroll_down() { scroll = setInterval(function() { window.scrollBy(0, 1000); console.log('start');}, 1500); } function stop_scroll_down() { clearInterval(scroll); console.log('stop'); } </script> <script> var app = angular.module('myApp', ['ngFileSaver']); app.controller('myCtrl', ['$http','FileSaver','Blob', function($http, FileSaver, Blob){ $scope.foo = function() { alert("foo"); $http.get('http://www.thehindu.com/news/'). success(function(pageContent){ alert("success"); var data = new Blob([pageContent], {type: 'text/plain;charset=utf-8' }); FileSaver.saveAs(data, 'text.txt'); }); }; }]); </script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <button onclick="start_scroll_down();">Start Scroll</button> <button onclick="stop_scroll_down();">Stop Scroll</button> <button ng-click="foo()">Newsww</button> </body> </html>

答案 5 :(得分：6)

试试这个：

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

答案 6 :(得分：4)

如果您只需更改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>

答案 7 :(得分：3)

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

参见pragmatic progressive enhancement的规则2。

答案 8 :(得分：2)

此外，您可以在 onclick 属性中使用 event.preventDefault 。 

<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

无需编写exstra click事件。

答案 9 :(得分：0)

您也可以这样写： - 

<a href="#!" onclick="function()">Delete User</a>

答案 10 :(得分：0)

调用该函数时，请按return false进行操作 例如：

<input  type="submit" value="Add" onclick="addNewPayment();return false;">

答案 11 :(得分：0)

创建一个包含两个链接的页面 - 一个位于顶部，另一个位于底部。单击顶部链接时，页面必须向下滚动到底部链接所在页面的底部。单击底部链接时，页面必须向上滚动到页面顶部。

答案 12 :(得分：0)

<a onclick="yourfunction()">

这样可以正常工作。无需添加href =＆＃34;＃＆＃34;

答案 13 :(得分：0)

你可能想检查你的CSS。在此示例中：https://css-tricks.com/the-checkbox-hack/有position: absolute; top: -9999px;。这在Chrome上尤其愚蠢，因为onclick="whatever"仍会跳转到点击元素的绝对位置。

删除position: absolute; top: -9999px;，display: none;可能会有帮助。

答案 14 :(得分：0)

对于崩溃的Bootstrap 3，如果您未在锚点上指定数据目标并依赖href来确定目标，则将阻止该事件。如果您使用数据目标，则需要自行阻止该事件。

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>

<div id="demo" class="collapse"> 
<p>Lorem ipsum dolor sit amet</p>
</div>
相关问题
最新问题