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

Question

jQuery 超链接 - href 值？ 文本1]

我在使用 jquery 和附加到锚元素的单击事件时遇到问题。[1]： jQuery 超链接 - href 值？ “这个”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 函数之前和之后。它仍然滚动到顶部。

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- 警报（“确定”） 并测试您是否仍然滚动到顶部。

Answer 5

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

Answer 6

刚失去

href="#"

在一个HTML标签......这就是导致网页“跳起来”。

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

和记得添加

cursor: pointer;

您一个的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();
        });
    });