原生JavaScript實現頁面回到頂部的功能

如果想實現點擊一個按鈕讓滾動條回到最頂部的功能，首先可能就會想到它是從底部位置移動到頂部的位置

它是一個運動的過程，只要知道當前位置(current Position)和想要到達的位置(target Position)不就可以啦

只不過以前用的都是元素div啦 img啦等等等

  現在不過是把元素的移動換成滾動條的移動

好了 上代碼 我儘量寫的清晰一點

 function $(id){return document.getElementById(id);} //通過ID獲取元素

function show(obj){obj.style.display="block"}

function hide(obj){obj.style.display="hide"}

function scroll(){

//IE9或者IE9+

//pageXOffset和pageYOffset是window對象的一個屬性

它的意思是:返迴文檔在視窗左上角(0,0)水平和垂直方向滾動的像素

其實就是代表一個水平滾動條，一個垂直滾動條。

if(window.pageXOffset)

{

return{top:window.pageYOffset}

}

//標準瀏覽器，谷歌，火狐啥的

document.compatMode是判斷瀏覽器的渲染方式當文檔聲明doctype的時候

返回值是CSS1Commpat(標準相容模式開啟)

否則返回的是BackCompact(標準相容模式關閉)

相容性無非是就在不同版本的瀏覽器用不同的代碼而已！

else if(document.compatMode=="CSS1Compat"){

return{top:document.documentElement.scrollTop}

}

//也可以簡寫 else return{top:document.body.scrollTop} 這樣寫不過是為了讓大家明白

else if(document.compatMode=="BackCompat"){

return{top:document.body.scrollTop}

}

var obj=$("returnTop"),y=0,timer=null；

//然後寫一個滾動條監聽事件,只要滾動條滾動就可以獲得滾動條的top值

window.onscroll=function(){

scroll().top>0?show(obj):hide(obj);//當滾動條的top值大於0的時候obj才顯示

y=scroll().top;

}

//點擊事件

obj.onclick=function(){

//設置定時器之前清除定時器

clearInterval(timer);

timer=setInterval(function(){

y=y-30;//最終的位置是(0,0) 減少的數字隨便設置

window.scrollTo(0,y);//根據參數移動到相應的位置(絕對定位)

if(y<=0){ 

clearInterval(timer);//清除定時器

}

},1000/60);

}

ps:每當完成一件事情的時候莫名的想唱歌！！！