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