jQuery点击锚点元素会强制滚动到顶部吗？

Question

jQuery超链接-href值？ 文字]

我在使用jQuery和附加到锚元素的单击事件时遇到了问题。 [1]: jQuery超链接-href值？ “这个”SO问题似乎是一个重复的问题，而且被接受的答案似乎没有解决问题。如果这是不好的SO礼仪，对不起。

在我的.ready()函数中，我有:

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

我的锚点长这样：

<a href="#" id="id_of_anchor"> link text </a> 

但是当链接被点击后，Ajax函数会按照预期执行，但浏览器会滚动到页面顶部，这并不好。

我已经尝试添加：

event.preventDefault(); 

在调用我的执行ajax的函数之前，我尝试过各种方法，但都没有帮助。我错过了什么吗？

澄清

我已经尝试了每一种组合

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

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

- Dan.StackOverflow

---

能否看到实际页面？我可以在2分钟内为您提供一个工作示例，但我不确定那是否会对您有所帮助 - 您尝试过排除周围因素直到它正常工作吗？ - Paolo Bergantino

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

你可以看到它们在正常工作。

- Paolo Bergantino

---

我已经对我的问题添加了更多细节，绝对不怀疑我做错了什么，您想看到更多的代码吗？ - Dan.StackOverflow

啊哈！如果你使用 return false，就无法获得事件参数。所以我已经让它工作了，但我仍然想知道为什么 event.preventDefault() 不起作用。 - Dan.StackOverflow

事件参数不应该是问题，看看我刚刚发布的示例页面。在我的ff、ie6和ie7上都可以正常工作。 - Paolo Bergantino

我之前使用event.preventDefault()没有成功，但是加上return false;后就完美地解决了。 - Carlos Quijano

Answer 2

您可以在href属性中使用javascript:void(0);。

- Tilal Husain

Answer 3

正如Tilal在上面所说的:

<a id="id_of_anchor" href="javascript:void(0)" />

使用此方法可以保持锚点标签的外观不变，允许您使用JavaScript为其分配点击处理程序，并且不会滚动。正因为这个原因，我们广泛地使用它。

- GaryM

Answer 4

这个问题更像是一个调试练习，因为你已经使用了正确的函数来自jQuery事件对象。

在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调用，并将其替换为一些无害的代码（如设置表单值或 -颤抖- alert("OK")），并测试是否仍然滚动到顶部。

- Jeff Meatball Yang

Answer 5

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

- tom

Answer 6

只需删除

href="#"

在HTML标签中...这就是导致网页“跳动”的原因。

<a id="id_of_anchor"> link text </a>

而且请记得添加

。

cursor: pointer;

将您的a标签的CSS样式更改，使其在鼠标悬停时看起来像一个链接。

祝好运。

- Sir Code-A-lot

---

不是推荐的删除 href 属性的方法，但在我使用 HTML 验证器检查后，它出人意料地通过了测试。所以我也点了个赞。 - Melvin

Answer 7

以下代码帮了我很多。谢谢！

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

- Christopher

Answer 8

我一直遇到同样的问题。

我认为这是因为在将元素附加到DOM之前绑定事件时发生的。

- Elie