今天繼續學習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.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(){
if(top==0)
clearInterval(time);
window.scrollBy(0,-25);
</script>
</html>
注:js不像php的變量作用域那樣,在函數外部定義的所有的變量均有全局作用域,在函數内部定義的變量使用"var"關鍵字定義的變量隻能在函數内部使用,直接定義的享有全局作用域.
這個demo除了在ie内部滾動的速度稍微慢了點之外,沒有相容性問題.