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

HTML:

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

 

JS:

<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。