代码之家 › 专栏 › 技术社区 › Dan.StackOverflow

jquery单击锚元素强制滚动到顶部?

anchor scroll click ajax jquery

Dan.StackOverflow · 技术社区 · 15 年前

我在使用jquery和附加到锚元素的单击事件时遇到了一个问题。 jQuery hyperlinks - href value? 所以这个问题似乎是重复的,而公认的答案似乎并不能解决问题。对不起,如果这是不好的话,那么礼貌。

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

8 回复 | 直到 7 年前

Paolo Bergantino 15 年前

这应该行得通,你能澄清你所说的“之前”是什么意思吗?你在这么做吗?

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

正如你所看到的,他们工作得很好。

Tilal Husain Tilal Husain 15 年前

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

GaryM 14 年前

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

保持锚标记的外观正确,允许您使用javascript为其分配单击处理程序,并且不会滚动。我们广泛使用它就是为了这个原因。

Jeff Meatball Yang 15 年前

jQuery Event object .

防止元素的默认行为(在您的情况下,A HREF=“#”):

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.preventDefault(); // assuming your handler has "evt" as the first parameter
  return false;
}

停止事件传播到周围HTML元素上的事件处理程序:

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}

警报(“正常”)

tom 15 年前

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

Sir Code-A-lot 11 年前

丢了这个

href="#"

在html标记中。。。这就是导致网页“跳转”的原因。

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

记住要加上

cursor: pointer;

祝你好运

Elie 14 年前

我也有同样的问题。

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

Christopher 13 年前

下面的代码对我帮助很大。非常感谢。

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