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

Question

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

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

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

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

score 9 · Accepted Answer

如果您将此添加到锚标记，通常需要添加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 指出的那样：

返回错误的工作，因为它阻止了事件冒泡，因为 preventDefault 阻止了元素的默认操作。由于单击跨度没有默认操作，因此它什么也不做！

所以第一个例子只有在你使用类似的东西时才会真正起作用

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

score 1 · Accepted Answer

你这样写“a” span：

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

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

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

那些该死的错别字，弄乱了整个代码:)

2 回答 2