/*如果想實現點選一個按鈕讓滾動條回到最頂部的功能，首先可能就會想到它是從底部位置移動到頂部的位置
它是一個運動的過程，只要知道當前位置(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=”none”}
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:每當完成一件事情的時候莫名的想唱歌！！！之前太馬虎了 有錯誤沒發現 因為直接在部落格裡寫的
現在測試成功！