JQuery scrollTop函数转到正确的位置，然后跳转到页面顶部

Question

我在每个字母的单击函数的联系人号码列表中使用了JQuery函数scrollTop。它滚动到它应该的位置，但然后立即滚动到顶部。

以下是代码中的函数示例：

$('.a').click(function(){
     $('html, body').animate({scrollTop:$('#A').position().top}, 'slow');
});

这是我为它制作的JSFiddle： http://jsfiddle.net/CR47/MdtSE/

Answer 1

如果您要将其添加到锚标记，通常需要添加preventDefault()或return false;来取消导航事件。

所以：

$('.a').on('click', function(e){
    e.preventDefault();
    $('html, body').animate({scrollTop:$('#A').position().top}, 'slow');
});

或

$('.a').on('click', function(e){
    $('html, body').animate({scrollTop:$('#A').position().top}, 'slow');
    return false;
});

我还更新了您的示例，以使用jQuery 1.8 +中推荐的语法。

编辑：正如@ Karl-Andre Gagnon所指出的那样：

  

返回false工作，因为它阻止事件冒泡   preventDefault阻止元素的默认操作。既然一个   点击跨度没有默认操作，它什么都不做！

所以第一个例子只有在你使用像

这样的东西时才能真正起作用

<a href="#" class="a">Back to top</a>

Answer 2

你写的是“a”span：

<span class="a">A</spam>

由于这个错字，它没有关闭。这导致每次点击（在任何字母上）都是在冒泡后点击“a”。

只需将“m”更改为“n”，一切正常。

那些该死的拼写错误，弄乱整个代码：）