jquery点击锚元素强制滚动到顶部？

jQuery超链接 – href值？ 文本] [1]

我正在使用jquery和附加到锚元素的click事件来解决问题。 [1]： jQuery超链接 – href值？ “这个”问题似乎是重复的，接受的答案似乎并没有解决问题。 对不起，如果这是不礼貌的礼仪。

在我的.ready（）函数中，我有：

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked Function_that_does_ajax(); }); 

我的主播看起来像这样：

  link text  

但是当单击链接时，会根据需要执行ajaxfunction，但浏览器会滚动到页面顶部。 不好。

我试过添加：

 event.preventDefault(); 

在调用我执行ajax的函数之前，但这没有帮助。 我错过了什么？

澄清

我已经使用了每一种组合

 return false; event.preventDefault(); event.stopPropagation(); 

在我调用js ajax函数之前和之后。 它仍然滚动到顶部。

Answer 1

那应该有用，你能澄清一下“之前”的含义吗？ 你在做这个吗？

 jQuery("#id_of_anchor").click(function(event) { event.preventDefault(); Function_that_does_ajax(); }); 

因为这应该起作用，如果它不工作你做错了什么，我们需要看到更多的代码。 但是，为了完整起见，您还可以尝试这样做：

 jQuery("#id_of_anchor").click(function() { Function_that_does_ajax(); return false; }); 

编辑

以下是此工作的一个示例 。

这两个链接使用此代码：

 $('#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; }); 

正如你所看到的，他们的工作正常。

Answer 2

你可以使用javascript：void（0）; 在href属性中。

Answer 3

正如Tilal上面所说：

保持锚标签看起来正确，允许您使用javascript为其分配点击处理程序，并且不滚动。 出于这个原因，我们广泛使用它。

Answer 4

这个问题更多的是一个调试练习，因为它声明你正在使用jQuery Event对象中的正确函数。

在jQuery事件处理程序中，您可以执行以下两个基本操作中的任一个或两个：

1.防止元素的默认行为（在您的情况下，A HREF =“＃”）：

 jQuery("#id_of_anchor").click(function(evt) { // ... evt.preventDefault(); // assuming your handler has "evt" as the first parameter return false; } 

2.阻止事件传播到周围HTML元素的事件处理程序：

 jQuery("#id_of_anchor").click(function(evt) { // ... evt.stopPropagation(); // assuming your handler has "evt" as the first parameter } 

由于你没有得到预期的行为，你应该暂时取出ajax调用，用一些无害的代码替换它，比如设置一个表单值，或者-shudder- alert（“OK”）并测试你是否仍然滚动到顶部。

Answer 5

 $("#id_of_anchor").click(function(event) { // ... return false; } 

Answer 6

只是失去了

 href="#" 

在一个html标签中…这就是导致网页“跳起来”的原因。

  link text  

并记得添加

 cursor: pointer; 

到你的css所以它看起来像鼠标hover链接。

祝好运。

Answer 7

我一直有同样的问题。

我认为在将元素附加到DOM之前绑定事件时会发生这种情况。

Answer 8

下面的代码帮助了我很多。 谢谢！

  $(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(); }); });