今天继续学习javascript,有一点php基础,感觉基础还是挺容易掌握的.听了老师的一节课,讲的document.documentElement.scrollHeight,当时老师做了一个返回顶部的小例子,听完课准备自己试一下,结果令我很惊讶,我发现这个东西居然有兼容性问题.
当然了碰见问题就得解决,我用了四个浏览器作测试,分别为:谷歌,ie,苹果,火狐.
结果:document.documentElement.scrollHeight->ie与火狐是我们预想的结果.( 即整个文件的 html的高度)
document.body.scrollHeight->苹果与谷歌的效果一样(即获取的是body的高度).
住:这里的兼容性问题并不是获取不到内容,而是获取的内容是相反的.
所以利用我们上面的出的结论:我们可以用三元运算符即那个大取哪个,就能解决这个问题,如下
var h=document.documentElement.scrollHeight; //ie+火狐
var h1=document.body.scrollHeight; //苹果+谷歌
var ht=h-h1>0?h:h1; //在ie和火狐中:h>h1,在苹果和谷歌中:h<h1;所以两者取大的,那么 就能获取到我们想要的的值
同样这个document.documentElement.scrollTop也有兼容性问题,这个相对简单我们可以直接用"||"运算符就可以了.如下:
var top=document.body.scrollTop(火狐与ie为0) || document.documentElement.scrollTop(谷歌和苹果位0);
解决了这个问题,那么返回顶部就变得非常简单了,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div id="divid" style="width:100px;height:100px;border:5px solid #f00"></div>
<h1>aaa</h1>
<h1>bbb</h1>
<h1>ccc</h1>
<h1>001</h1>
<h1>002</h1>
<h1>003</h1>
<h1>004</h1>
<h1>005</h1>
<h1>006</h1>
<h1>007</h1>
<h1>008</h1>
<h1>009</h1>
<h1>010</h1>
<h1>011</h1>
<h1>012</h1>
<h1>013</h1>
<h1>014</h1>
<h1>015</h1>
<img src="images/ali/101.gif" id="imgid" style="position:fixed;right:25px;bottom:25px;display:none" >
</body>
<script>
var imgobj=document.getElementById(‘imgid‘);
var time=null;
window.onscroll=function()
{
var h=document.documentElement.scrollHeight;
var h1=document.body.scrollHeight;
var ht=h-h1>0?h:h1;
var top=document.body.scrollTop || document.documentElement.scrollTop;
var cHeight=document.documentElement.clientHeight;
var xheight=ht-top;
if(xheight-cHeight<=60)
{
imgobj.style.display=‘block‘;
}
else
{
imgobj.style.display=‘none‘;
}
}
imgobj.onclick=function(){
time =setInterval(get,5);
function get(){
var top=document.body.scrollTop || document.documentElement.scrollTop;
if(top==0)
{
clearInterval(time);
}
window.scrollBy(0,-25);
}
}
</script>
</html>
注:js不像php的变量作用域那样,在函数外部定义的所有的变量均有全局作用域,在函数内部定义的变量使用"var"关键字定义的变量只能在函数内部使用,直接定义的享有全局作用域.
这个demo除了在ie内部滚动的速度稍微慢了点之外,没有兼容性问题.