Question

jQuery hyperlinks - href value? text] [1]

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

在我的.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;
});

修改

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

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

Answer 2

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

Answer 3

正如Tilal上面所说：

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

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

Answer 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”）并测试你是否仍然滚动到顶部。

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

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

8 个答案: