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>

<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(){

var top=document.body.scrollTop || document.documentElement.scrollTop;

if(top==0)

{

clearInterval(time);

}

window.scrollBy(0,-25);

}

}

</script>

</html>


注:js不像php的變量做用域那樣,在函數外部定義的全部的變量均有全局做用域,在函數內部定義的變量使用"var"關鍵字定義的變量只能在函數內部使用,直接定義的享有全局做用域.


這個demo除了在ie內部滾動的速度稍微慢了點以外,沒有兼容性問題.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程