Javascript javascript锚点避免在点击时滚动到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2084750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript anchor avoid scroll to top on click
提问by salmane
I created a function in javascript that i add to an anchor as such
我在 javascript 中创建了一个函数，我将其添加到锚点中
javascript :
javascript :
somefunction = function () {alert('foo')}
html :
html :
<a href="#" onclick="return somefunction()">anchor</a>
everytime i click on the anchor the function executes but the screen scrolls to the top
每次我点击锚点时，函数都会执行，但屏幕会滚动到顶部
I know i could do this
我知道我可以做到这一点
<a href="javascript:void(0)" onclick="return somefunction()">anchor</a>
but I have seen the first option implemented without this hick up of scrolling up
但我已经看到第一个选项在没有向上滚动的情况下实现
is there any trick to it?
有什么技巧吗？
thank you
谢谢你
回答by Oded
The onclick causes the page to resubmit, therefore scrolling to the top.
onclick 导致页面重新提交，因此滚动到顶部。
You need the onclick event to return a false in order to avoid the postback.
您需要 onclick 事件返回 false 以避免回发。
This can be done by changing your function to return a false:
这可以通过更改您的函数以返回 false 来完成：
somefunction = function () {alert('foo'); return false;}
Or to change the link and onClick event to do so:
或者更改链接和 onClick 事件以执行此操作：
<a href="javascript:void(0)" onclick="somefunction(); return false;">anchor</a>
回答by dxh
The trick is that your onclick returns the value of somefunction, so that if you make sure somefunctionalways return false, then the event will return false as well, and cancel the default behavior of the anchor.
诀窍是您的 onclick 返回 的值somefunction，因此如果您确保somefunctionalways return false，那么该事件也将返回 false ，并取消锚点的默认行为。
So this should solve your problem:
所以这应该可以解决您的问题：
somefunction = function () { alert('foo'); return false; }
But I should mention that when there is an error somewhere in somefunction, the rest of the javascript will not execute, and the browser will still follow the link to #. It is advisable, therefore, to use javascript:void(0)instead, as this will rid you of that problem.
但我要指出的是，当有一个错误的地方somefunction，javascript的其余部分将不执行，浏览器仍然会跟随链接#。因此，建议javascript:void(0)改用它，因为这将解决您的问题。
回答by ZoogieZork
Return falsefrom your onclick handler, e.g.:
false从您的 onclick 处理程序返回，例如：
<a href="#" onclick="somefunction(); return false;">anchor</a>
回答by jamesdlin
You need to make somefunction()return false, or you need to explicitly add return falseto your onclickhandler. For example:
您需要使somefunction()return false，或者您需要显式添加return false到您的onclick处理程序。例如：
<a href="#" onclick="somefunction(); return false;">anchor</a>
This will have the browser ignore the hrefportion of the link when someone clicks on it.
这将使浏览器href在有人点击链接时忽略该部分。
回答by Juan J
I know that the question is asked for JavaScript, but if anyone would like to do it in jQuery then it is pretty simple.
我知道这个问题是针对 JavaScript 提出的，但是如果有人想在 jQuery 中做到这一点，那么它非常简单。
You can give your a tag an id and reference it in jQuery to do a certain action.
你可以给你的标签一个 id 并在 jQuery 中引用它来执行某个操作。
All you need to do, - to avoid the scroll to top is to disable the default action of the a tag.
所有你需要做的， - 避免滚动到顶部是禁用 a 标签的默认操作。
Code:
代码：
$( "#a-tag-id" ).click(function(e) {
e.preventDefault();
alert( "Hello World" );
});
