jquery单击锚元素强制滚动到顶部？答案

【问题标题】：jquery click on anchor element forces scroll to top?jquery单击锚元素强制滚动到顶部？
【发布时间】：2010-11-06 21:21:06
【问题描述】：

jQuery hyperlinks - href value?文字][1]

我在使用 jquery 和附加到锚元素的点击事件时遇到了问题。 [1]：jQuery hyperlinks - href value?“This”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 函数之前和之后。它仍然滚动到顶部。

【问题讨论】：

可以看到实际页面吗？我可以在 2 分钟内完成一个例子，但我不确定这是否会对你有很大帮助 - 你试过了吗？去除周围的因素直到它起作用？

标签： jquery ajax click scroll anchor

【解决方案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;
});

编辑

Here is an example of this working.

两个链接使用这个代码：

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

如您所见，它们运行良好。

【讨论】：

我已经为我的问题添加了更多细节，绝对不要怀疑我做错了什么，你还想看什么代码？
啊哈！如果使用 return false，则不能有 event 参数。所以我已经让它工作了，但我仍然想知道为什么 event.preventDefault() 不起作用。
事件参数应该没问题，看我刚才放的示例页面。它在 ff、ie6、ie7 上对我很有效
我在添加 return false 后使用 event.preventDefault() 没有成功；它工作完美。

【解决方案2】：

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

【讨论】：

【解决方案3】：

正如蒂拉尔上面所说的：

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

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

【讨论】：

【解决方案4】：

这个问题更像是一个调试练习，因为它表明您正在使用来自jQuery Event object 的正确函数。

在 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") 并测试您是否仍然滚动到顶部。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

只是丢了

href="#"

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

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

记得添加

cursor: pointer;

到您的 a 的 css，因此它看起来像鼠标悬停时的链接。

祝你好运。

【讨论】：

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

【解决方案7】：

我也遇到了同样的问题。

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

【讨论】：

【解决方案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();
        });
    });

【讨论】：