/*如果想实现点击一个按钮让滚动条回到最顶部的功能，首先可能就会想到它是从底部位置移动到顶部的位置
它是一个运动的过程，只要知道当前位置(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:每当完成一件事情的时候莫名的想唱歌！！！之前太马虎了 有错误没发现 因为直接在博客里写的
现在测试成功！
- 还没有人评论，欢迎说说您的想法！
客服
