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

Question

jQuery 超链接 - href 值？ text][1]

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

在我的 .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 函数之前和之后的 。 它仍然滚动到顶部。

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 上面所说：

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

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

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

Answer 5

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

Answer 6

只是丢失了

href="#"

html 标签...这就是导致网页“跳起来”的原因。

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

并记住添加

cursor: pointer;

到你的 a 的 css 中，这样它看起来就像鼠标悬停时的链接。

祝你好运。

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