jQuery jquery点击锚元素强制滚动到顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1061580/
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
jquery click on anchor element forces scroll to top?
提问by Dan.StackOverflow
jQuery hyperlinks - href value?text][1]
I am running in to a problem using jquery and a click event attached to an anchor element. [1]: jQuery hyperlinks - href value?"This" SO question seems to be a duplicate, and the accepted answer doesn't seem to solve the problem. Sorry if this is bad SO etiquette.
我在使用 jquery 和附加到锚元素的点击事件时遇到了问题。[1]：jQuery 超链接 - href 值？“这个”SO 问题似乎是重复的，接受的答案似乎并没有解决问题。对不起，如果这是不好的 SO 礼节。
In my .ready() function I have:
在我的 .ready() 函数中，我有：
jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
Function_that_does_ajax();
});
and my anchor looks like this:
我的锚看起来像这样：
<a href="#" id="id_of_anchor"> link text </a>
but when the link is clicked, the ajax function is performed as desired, but the browser scrolls to the top of the page. not good.
但是当点击链接时，ajax 功能按需要执行，但浏览器滚动到页面顶部。不好。
I've tried adding:
我试过添加：
event.preventDefault();
before calling my function that does the ajax, but that doesn't help. What am I missing?
在调用我执行 ajax 的函数之前，但这无济于事。我错过了什么？
Clarification
澄清
I've used every combination of
我用过每一个组合
return false;
event.preventDefault();
event.stopPropagation();
before and after my call to my js ajax function. It still scrolls to the top.
在我调用我的 js ajax 函数之前和之后。它仍然滚动到顶部。
采纳答案by Paolo Bergantino
That should work, can you clarify what you mean by "before"? Are you doing this?
那应该有效，你能澄清一下你所说的“之前”是什么意思吗？你在做这个吗？
jQuery("#id_of_anchor").click(function(event) {
event.preventDefault();
Function_that_does_ajax();
});
Because that shouldwork in the sense that if it's not working YOU are doing something wrong and we'd need to see more code. However, for the sake of completeness, you could also try this:
因为这应该在某种意义上起作用，如果它不起作用，您就做错了，我们需要查看更多代码。但是，为了完整起见，您也可以尝试以下操作：
jQuery("#id_of_anchor").click(function() {
Function_that_does_ajax();
return false;
});
EDIT
编辑
Here is an example of this working.
The two links use this code:
这两个链接使用此代码：
$('#test').click(function(event) {
event.preventDefault();
$(this).html('and I didnt scroll to the top!');
});
$('#test2').click(function(event) {
$(this).html('and I didnt scroll to the top!');
return false;
});
And as you can see they are working just fine.
正如您所看到的，它们运行良好。
回答by Paolo Bergantino
you can use javascript:void(0); in href property.
你可以使用 javascript:void(0); 在 href 属性中。
回答by GaryM
As Tilal said above:
正如 Tilal 上面所说：
<a id="id_of_anchor" href="javascript:void(0)" />
keeps the anchor tag looking right, allows you to assign click handlers to it with javascript, and doesn't scroll. We use it extensively just for this reason.
保持锚标签看起来正确，允许您使用 javascript 为其分配点击处理程序，并且不滚动。正是出于这个原因，我们广泛使用它。
回答by Jeff Meatball Yang
This question is more of a debugging exercise since it's stated that you are using the correct functions from the jQuery Event object.
这个问题更像是一个调试练习，因为它表明您正在使用jQuery Event object 中的正确函数。
In a jQuery event handler, you can do either, or both, of two basic things:
在 jQuery 事件处理程序中，您可以执行以下两项基本操作中的一项或两项：
1. Prevent the default behavior of the element (The A HREF="#", in your case):
1. 防止元素的默认行为（在您的情况下，A HREF="#"）：
jQuery("#id_of_anchor").click(function(evt) {
// ...
evt.preventDefault(); // assuming your handler has "evt" as the first parameter
return false;
}
2. Stop the event from propagating to event handlers on the surrounding HTML elements:
2. 阻止事件传播到周围 HTML 元素上的事件处理程序：
jQuery("#id_of_anchor").click(function(evt) {
// ...
evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}
Since you're not getting the expected behavior, you should take out the ajax call temporarily, replace it with some innocuous code like setting a form value, or -shudder- alert("OK")and test if you still scroll to the top.
由于你没有得到预期的行为，你应该暂时取消 ajax 调用，用一些无害的代码替换它，比如设置表单值，或者 -shudder- alert("OK")并测试你是否仍然滚动到顶部.
回答by tom
$("#id_of_anchor").click(function(event) {
// ...
return false;
}
回答by Sir Code-A-lot
just lose the
只是失去
href="#"
In the a html tag... that's what causing the web page to "jump up".
在 html 标签中......这就是导致网页“跳转”的原因。
<a id="id_of_anchor"> link text </a>
and remember to add
并记得添加
cursor: pointer;
to your a's css so it will look like a link on mouseover.
到您的 a 的 css，因此它看起来像鼠标悬停时的链接。
Good luck.
祝你好运。
回答by Chris
It helped me a lot with the below code. Thank you!
下面的代码对我帮助很大。谢谢！
$(document).ready(function() {
$(".dropdown dt a").click(function(event) {
event.preventDefault();
$(".dropdown dd ul").toggle('slow');
});
$(".dropdown dd ul li a").click(function(event) {
event.preventDefault();
$(".dropdown dd ul").hide();
});
});
回答by Elie
I've been having the same problem.
我一直有同样的问题。
I think it occurs when you bind the event before appending the element to the DOM.
我认为在将元素附加到 DOM 之前绑定事件时会发生这种情况。
