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

今天继续学习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内部滚动的速度稍微慢了点之外,没有兼容性问题.

时间: 2024-10-13 10:07:38

javascript实现无兼容性问题返回顶部的相关文章

Javascript 特效(一)返回顶部

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 body{ height:2000px;} 9 #box{ width:40px; height:40px;

挺个性的jQuery返回底部、返回顶部特效

运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了.本款效果的亮点在于兼容性和动画效果,以及设计美观的箭头等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

返回顶部和底部(动画)

<!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"> <head> <meta http-equiv="Content-

a超链接之返回顶部的两种实现方法

1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id">返回顶部</a> 2.js实现 通过设置标签滚动位置判断 document.body.scrollTop=0; <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

javascript 返回顶部

<style>#linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px;}</style><script>function linGoTop(){    var obj = document.getElement

javascript返回顶部几种代码总结

纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.

JavaScript/Jquery返回顶部代码

<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.8.2.js"></script> <style type="text/css">

JavaScript之返回顶部

为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hexo上感觉浪费了很多的时间,毕竟Hexo对我来说还是高大尚的东西,适可而止. 好了!我还是好好搞自己基础的东西吧,做自己该做的事就可以了. 我们回到这章话题,我们都知道都看到过,很多页面都会有“返回顶部”,方便快捷. 到页面底部 返回页面顶部

原生js实现缓动返回顶部

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 1366px; height: 2000px; position: absolute; background-color