用jQuery的animate()实现平滑滚动

摘要: 用 offset().top; 获取目标位置的高度；animate() 实现平滑过渡，

HTML:

[code=plain]<button>平滑滚动</button>
<div style="width: 400px; height: 200px;background-color: red;margin-top: 700px;"></div>

JS:

[code=plain]<script>
//获取节点对象
$("button").click(function(){
var valOfScroll =$("div").offset().top;
//让滚轴从当前位置的scroll在600毫秒内偏移到位置为valOfScroll。
$("html,body").animate({scrollTop: valOfScroll}, 600)
});
</script>

另外：

经常还会做“回到顶部”和 “到底部”的功能

回到顶部只需要让当前的scrollTop渐变到srollTop=0；

到底部则是有得一说，获取底部的scrollTop：var bottom =document.body.scrollHeight;

另外一个更简单的办法是，获取在底部的元素的scrollTop。