javascript实现无兼容性问题返回顶部

时间 2020-08-28

标签 javascript 实现兼容性问题返回顶部栏目 JavaScript 繁體版

原文原文链接

今天继续学习javascript,有一点php基础,感受基础仍是挺容易掌握的.听了老师的一节课,讲的document.documentElement.scrollHeight,当时老师作了一个返回顶部的小例子,听完课准备本身试一下,结果令我很惊讶,我发现这个东西竟然有兼容性问题.javascript

固然了遇见问题就得解决,我用了四个浏览器做测试,分别为:谷歌,ie,苹果,火狐.
php

结果:document.documentElement.scrollHeight->ie与火狐是咱们预想的结果.( 即整个文件的 html的高度)
html

document.body.scrollHeight->苹果与谷歌的效果同样(即获取的是body的高度).
java

住:这里的兼容性问题并非获取不到内容,而是获取的内容是相反的.
浏览器

因此利用咱们上面的出的结论:咱们能够用三元运算符即那个大取哪一个,就能解决这个问题,以下ide

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也有兼容性问题,这个相对简单咱们能够直接用"||"运算符就能够了.以下:spa

var top=document.body.scrollTop(火狐与ie为0) || document.documentElement.scrollTop(谷歌和苹果位0);

解决了这个问题,那么返回顶部就变得很是简单了,以下:

<!DOCTYPE html>

<head>

</head>

<body>

</body>

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内部滚动的速度稍微慢了点以外,没有兼容性问题.