jQuery的点击锚元素力量滚动到顶部？(jquery click on anchor elemen

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

我使用jQuery和连接到一个锚元素的点击事件运行中的一个问题。 [1]： jQuery的超链接- href的值？ “这个”，所以问题可能是重复的，而公认的答案似乎并没有解决问题。很抱歉，如果这是不好的SO礼仪。

在我的。就绪（）函数，我有：

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：无效（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- 警报（“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 click on anchor element forces scroll to top?