我在每个字母的点击函数中的联系人号码列表中使用了 JQuery 函数scrollTop
。它滚动到它应该滚动的位置,然后立即滚动回顶部。
以下是代码中的函数示例:
$('.a').click(function(){
$('html, body').animate({scrollTop:$('#A').position().top}, 'slow');
});
这是我为它制作的 JSFiddle:http: //jsfiddle.net/CR47/MdtSE/
我在每个字母的点击函数中的联系人号码列表中使用了 JQuery 函数scrollTop
。它滚动到它应该滚动的位置,然后立即滚动回顶部。
以下是代码中的函数示例:
$('.a').click(function(){
$('html, body').animate({scrollTop:$('#A').position().top}, 'slow');
});
这是我为它制作的 JSFiddle:http: //jsfiddle.net/CR47/MdtSE/
如果您将此添加到锚标记,通常需要添加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>
你这样写“a” span
:
<span class="a">A</spam>
由于这个错字,它没有关闭。这导致每次点击(在任何字母上)都是在冒泡后点击“a”。
只需将“m”更改为“n”,一切正常。
那些该死的错别字,弄乱了整个代码:)