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

Question

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

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

$('.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>