Saber 酱的抱枕

Fly me to the moon

07/6
2015
学习

js获取页面卷去高度的兼容性问题

获取页面卷去(滚动)高度的语句是:

document.body.scrollTop

然而实际应用中,在IE和firefox中需要这么写:

document.documentElement.scrollTop

综合起来可以用下面的写法:

document.documentElement.scrollTop|| document.body.scrollTop

上面是获取卷去的高度,如果是要设置卷去的高度的话,就只能通过判断浏览器来区别对待了:

if(navigator.userAgent.indexOf('AppleWebKit') > -1){//如果是chrome内核,则
	document.body.scrollTop =_scrollTop;
}else{//否则
	document.documentElement.scrollTop=_scrollTop;//IE和火狐需要这一句
}

scrollLeft也需要这么写。

以上没有考虑Safari的情况,因为我是win系统。据说Safari用的是自己特有的函数,需要考虑Safari的话可参考此处

刚才帮同学写了个返回顶部的按钮,按钮是在iframe里面的,把代码贴出来备用:

$("#ScrollToTop").click(function  () {
	if(navigator.userAgent.indexOf('AppleWebKit') > -1){//如果是chrome内核,则
		window.top.document.body.scrollTop =0;
	}else{//否则
		window.top.document.documentElement.scrollTop=0;
	}
})

注意,如果你把此代码用在顶级页面中,是没有问题的。如果用在iframe里面,只有在服务器环境中才能看到效果。在本地环境中,iframe获取window.top的属性会受到跨域限制,所以无效。

js获取页面卷去高度的兼容性问题