当点击链接触发JavaScript时，如何阻止网页从顶部滚动到顶部？
当我有一个链接与jQuery或JavaScript事件，如：
<a href="#">My Link</a> 如何防止页面滚动到顶部？ 当我从锚点删除href属性时，页面不会滚动到顶部，但链接看起来不是可点击的。
您需要防止发生点击事件（即导航到链接目标）的默认操作。
有两种方法可以做到这一点。
选项1： event.preventDefault()
调用传递给您的处理程序的事件对象的.preventDefault()方法。 如果您使用jQuery来绑定您的处理程序，则该事件将成为jQuery.Event一个实例，并且将成为.preventDefault()的jQuery版本。 如果您使用addEventListener来绑定您的处理程序，它将是一个Event和.preventDefault()的原始DOM版本。 无论哪种方式将做你所需要的。
例子：
$('#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（）与返回false（无jQuery）的规范细节。
你可以将你的href设置为#! 而不是#
例如，
<a href="#!">Link</a>
单击时不会进行任何滚动。
谨防！ 点击后，这仍然会在浏览器的历史logging中添加一个条目，这意味着在点击链接后，用户的后退button不会将它们带到之前的页面。 出于这个原因，最好使用.preventDefault()方法，或者两者结合使用。
这里是一个小提琴说明这（只是你的浏览器，直到你得到一个滚动条）：
http://jsfiddle.net/9dEG7/
对于规格书 – 为什么这样工作：
此行为在导航到片段标识符部分下的HTML5规范中指定。 使用"#"的href链接导致文档滚动到顶端的原因是，此行为被明确指定为处理空片段标识符的方式：
2.如果
fragid是空string，则文档的指示部分是文档的顶部
使用"#!"的href 相反，只是因为它避免了这个规则。 感叹号没有任何魔力 – 它只是一个方便的片段标识符，因为它与典型的fragid显着不同，并且不太可能匹配页面上元素的id或name 。 事实上，我们可以在散列之后放几乎任何东西。 唯一不足的就是空string，单词“top”或匹配页面上元素name或id属性的string。
更确切地说，我们只需要一个片段标识符，这将导致我们在下面的algorithm中进入步骤8，从而确定来自fragid 的文档的指示部分 ：
将URLparsing器algorithm应用于URL，并让fragid成为分析结果URL的片段组件。
如果
fragid是空string，则文档的指示部分是文档的顶部; 在这里停止algorithm。让
fragid bytes是百分比解码fragid的结果。
decoded fragid是将UTF-8解码器algorithm应用于fragid bytes。 如果UTF-8解码器发出解码器错误，则中止解码器，而是跳转到标记为“no decoded fragid的步骤。如果DOM中有一个元素的ID与
decoded fragid，那么树中第一个这样的元素就是文档的指示部分; 在这里停止algorithm。没有解码的fragid ：如果DOM中有一个名称属性的值等于
fragid（ 未decoded fragid）的元素，那么树中第一个这样的元素就是文档的指定部分; 在这里停止algorithm。如果fragid是string
top的ASCII不区分大小写的匹配top，则文档的指示部分是文档的顶部。 在这里停止algorithm。否则，文件没有标明的部分。
只要我们打到第8步， 没有文件的指定部分 ，下面的规则就起作用了：
如果没有指示的部分…则用户代理必须不做任何事情。
这就是浏览器不滚动的原因。
一个简单的方法是利用这个代码：
<a href="javascript:void(0);">Link Title</a>
这种方法不会强制页面刷新，所以滚动条保持原位。 此外，它允许您以编程方式更改onclick事件，并使用jQuery处理客户端事件绑定。
由于这些原因，上述解决scheme比：
<a href="javascript:myClickHandler();">Link Title</a> <a href="#" onclick="myClickHandler(); return false;">Link Title</a>
当且仅当myClickHandler方法没有失败时，最后的解决scheme将避免滚动跳转问题。
从你调用的代码中返回false将会起作用，并且在许多情况下是首选方法，但是你也可以这样做
<a href="javascript:;">Link Title</a>
当谈到search引擎优化，这取决于你的链接将被用于。 如果你打算真正使用它来链接到其他内容，那么我会同意理想情况下，你会想在这里有意义的东西，但如果你使用的链接function的目的可能像堆栈溢出为后工具栏（粗体，斜体，超链接等），那么它可能没有关系。
尝试这个：
<a href="#" onclick="return false;">My Link</a>
首先链接到比页面顶部更明智的东西。 然后取消默认事件。
见实用渐进式强化规则2。
如果您只需更改href值，则应该使用：
<a href="javascript:void(0);">Link Title</a>
我刚刚提出的另一个简洁的解决scheme是使用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>
另外，你可以在onclick属性中使用event.preventDefault 。
<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>
无需编写exstra点击事件。
你应该改变
<a href="#">My Link</a>
至
<a href="javascript:;">My Link</a>
这种方式当链接被点击时，页面将不会滚动到顶部。 这比使用href =“＃”更清晰，然后阻止默认事件运行。
对于这个问题的第一个答案，我有很好的理由，比如return false; 如果被调用的函数抛出一个错误，将不会执行，或者您可以添加return false; 到一个doSomething()函数，然后忘记使用return doSomething();
你也可以这样写：
<a href="#!" onclick="function()">Delete User</a>
当调用函数时，按照下面的例子return false ：
<input type="submit" value="Add" onclick="addNewPayment();return false;">
创build一个包含两个链接的页面，一个在顶部，另一个在底部。 单击顶部链接时，页面必须向下滚动到底部链接所在页面的底部。 在点击底部链接时，页面必须滚动到页面顶部。
<a onclick="yourfunction()">
这将工作正常。 不需要添加href =“＃”
你可能想检查你的CSS。 在这里的例子： https ： //css-tricks.com/the-checkbox-hack/有position: absolute; top: -9999px; position: absolute; top: -9999px; 。 这在Chrome上尤其愚蠢，因为onclick="whatever"仍然跳转到被单击元素的绝对位置。
删除position: absolute; top: -9999px; position: absolute; top: -9999px; ，用于display: none; 可能有帮助。
