js原生滾動條動畫

說起滾動條動畫，之前一直用的jQuery，今天比較閒，用js手寫了一個，比jQ的好用哈，jQ是勻速滑動，我這個有減速效果！

1.調用scroll_to，傳入指定位置的高度參數就可以用了！

2.減速的效果是用步長實現的，即每次滾動都是剩餘距離的1/40，所以越滾越快！

 

學到的幾個js獲取位置方法：

1.當前頁滾動高度： document.body.scrollTop

2.元素距離文檔頂部：dom.offsetTop

3.網頁可見高度：document.documentElement.clientHeight

html代碼：

 

	<ul class="nav">
		<li>導航1</li>
		<li>導航2</li>
		<li>導航3</li>
		<button onclick= "scroll_To(0)">滾動到頂部</button>
		<button onclick= "scroll_To(1300)">滾動到下面</button>
	</ul>

js代碼：

//滾動條函數封裝
function scroll_To(tar_y){ //tar_y 即滑動條頂端 距離頁面最上面的距離
	//console.log('oooooooo')
	var timer = setTimeout(function(){
	    var current_y = document.body.scrollTop
	    //console.log(current_y)
	    step = 40 //步長係數 即剩餘的距離除以40 每1ms 移動一段距離
	    if (tar_y>current_y){ //tar_y > current_y 即向下滾動
	        var dist = Math.ceil((tar_y-current_y)/step)
	        var next_y = current_y+dist
            if(next_y<tar_y){  //向上滾動和向下滾動判定的區別 是這裏！！
                window.scrollTo(0,next_y)   
                scroll_To(tar_y)
                console.log('向下')
            }
            else{
                window.scrollTo(0,tar_y)
                //clearTimeout(timer)
            }
	    }
	    else{ //tar_y < current_y 即向上滾動
	        var dist = Math.floor((tar_y-current_y)/step)
	        var next_y = current_y+dist
	        if(next_y>tar_y){
	            window.scrollTo(0,next_y)
	            scroll_To(tar_y)
	            console.log('向上')
	        }
	        else{
	            window.scrollTo(0,tar_y)
	            //clearInterval(timer)
	        }
	    }
	},1)
}

效果截圖：