原生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=”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:每当完成一件事情的时候莫名的想唱歌！！！之前太马虎了 有错误没发现 因为直接在博客里写的

现在测试成功！