求救—
找了很多兼容性文档 但是说的都不太一样 心累
所以结果到底是怎样的
附一个查js官方文档 MDN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
原理及遇到的问题
//实现功能 点击图片 回到顶部
//实现原理
/**给图片注册点击事件
* 获取当前位置距顶部距离
* speed=Math.floor(-getTop/6) (非匀速 将每次获得的scrollTop除以一个数 作为速度 )
* -的作用是 假设speed为0.5时 Math.floor ---> 0 无法做到让 scroolTop==0
* 假设speed为-0.5时 Math.floor ---> -1
* 每次document.documentElement.scrollTop+=step 可获取值 也可设置值 但是别赋给变量值 错误的代码
* 判断是否等于0 ---- >停止定时器
*
*
* 一开始考虑兼容性问题
* 但是获取没问题 但是设置scroolTop 三行代码不知道咋写
* window.pageXOffset document.documentElement.scrollLeft document.body.scrollLeft
*
* 后来索性就只保留document.documentElement.scrollLeft没发现问题
* 后来直接就var getTop = document.documentElement.scrollTop;
* IE9 谷歌 火狐没发现问题
*
*/
火狐
谷歌
IE9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Javascript 返回顶部</title>
<style type="text/css">
#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:block; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}
.bg {width:1190px; margin:0 auto;}
</style>
</head>
<body>
<a href="javascript:;" id="btn" title="回到顶部"></a>
<div class="bg">
<img src="images/tb_bg.jpg" alt="" />
</div>
</body>
<script type="text/javascript">
//实现功能 点击图片 回到顶部
//实现原理
/**给图片注册点击事件
* 获取当前位置距顶部距离
* speed=Math.floor(-getTop/6) (非匀速 将每次获得的scrollTop除以一个数 作为速度 )
* -的作用是 假设speed为0.5时 Math.floor ---> 0 无法做到让 scroolTop==0
* 假设speed为-0.5时 Math.floor ---> -1
* 每次document.documentElement.scrollTop+=step 可获取值 也可设置值 但是别赋给变量值 错误的代码
* 判断是否等于0 ---- >停止定时器
*
*
* 一开始考虑兼容性问题
* 但是获取没问题 但是设置scroolTop 三行代码不知道咋写
* window.pageXOffset document.documentElement.scrollLeft document.body.scrollLeft
*
* 后来索性就只保留document.documentElement.scrollLeft没发现问题
* 后来直接就var getTop = document.documentElement.scrollTop;
* IE9 谷歌 火狐没发现问题
*
*/
function my$(id){
return document.getElementById(id);
}
var timeId=null;
my$("btn").onclick=function(){
//设置定时器
timeId=setInterval(function(){
//没用兼容代码 可以显示 iE9 chrome firefox
//获取滚动条距顶部的高度
var getTop = document.documentElement.scrollTop;
console.log(getTop);
//定义速度
var speed=Math.floor(-getTop/6); //以0.5为例 +0.5 -->0 -0.5--->-1
document.documentElement.scrollTop+=speed;
if(getTop==0)
{
clearInterval(timeId);
}
},30);
}
</script>
</html>