今天继续学习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="p_w_picpaths/ali/101.gif" id="imgid" style="position:fixed;right:25px;bottom:25px;display:none" alt="">

</body>

<script>

var imgobj=document.getElementById('imgid');

var time=null;

window.οnscrοll=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.οnclick=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内部滚动的速度稍微慢了点之外,没有兼容性问题.