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

Dan*_*low 18 ajax anchor jquery scroll click

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

我正在使用jquery和附加到锚元素的click事件来解决问题.[1]:jQuery超链接 - href值?"这个"问题似乎是重复的,接受的答案似乎并没有解决问题.对不起,如果这是不礼貌的礼仪.

在我的.ready()函数中,我有:

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
        Function_that_does_ajax();
        });
Run Code Online (Sandbox Code Playgroud)

我的主播看起来像这样:

<a href="#" id="id_of_anchor"> link text </a> 
Run Code Online (Sandbox Code Playgroud)

但是当单击链接时,会根据需要执行ajax功能,但浏览器会滚动到页面顶部.不好.

我试过添加:

event.preventDefault(); 
Run Code Online (Sandbox Code Playgroud)

在调用我执行ajax的函数之前,但这没有帮助.我错过了什么?

澄清

我已经使用了每一种组合

return false;
event.preventDefault(); 
event.stopPropagation();
Run Code Online (Sandbox Code Playgroud)

在我调用js ajax函数之前和之后.它仍然滚动到顶部.

Pao*_*ino 18

那应该有用,你能澄清一下"之前"的含义吗?你在做这个吗?

jQuery("#id_of_anchor").click(function(event) {
    event.preventDefault();
    Function_that_does_ajax();
});
Run Code Online (Sandbox Code Playgroud)

因为这应该起作用,如果它不工作你做错了,我们需要看到更多的代码.但是,为了完整起见,您还可以尝试这样做:

jQuery("#id_of_anchor").click(function() {
    Function_that_does_ajax();
    return false;
});
Run Code Online (Sandbox Code Playgroud)

编辑

这是一个工作的例子.

这两个链接使用此代码:

$('#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;
});
Run Code Online (Sandbox Code Playgroud)

正如你所看到的,他们的工作正常.


小智 5

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


Gar*_*ryM 5

正如Tilal上面所说:

<a id="id_of_anchor" href="javascript:void(0)" />
Run Code Online (Sandbox Code Playgroud)

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