返回頂部

返回頂部

原創

2020-02-22 12:33

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #top{
        right:20px;
        bottom:20px;
        position:fixed;
        cursor: pointer;
        display: none;
    }
</style>
<body style="height: 1500px">

    <p>1qqqq11111;</p>
    <p>asdkfjasdjflajsdlfjasld;jfladsjfldskajflk</p>

    <div id="top">返回頂部</div>
</body>
<script>

    function isChrome(){
        nu=navigator.userAgent;     //判斷瀏覽器內核
        //alert(nu)
        if(nu.match(/safari/i)){        //判斷是否是safari Chrome使用的就是Safari內核
            return true;
        } else {
            return false;
        }

    }

    topobj=document.getElementById('top');


    window.οnscrοll=function() {

        if (isChrome()) {               //是safari內核,使用body獲取屏幕高
            osTop = document.body.scrollTop;
            if (osTop > 300) {
                topobj.style.display = 'block'
            } else {
                topobj.style.display = 'none'
            }
        }
        else{                           // 不是safari內核,使用documentElement獲取屏幕高
                osTop = document.documentElement.scrollTop;
                if (osTop > 300) {
                    topobj.style.display = 'block'
                } else {
                    topobj.style.display = 'none'
                }
            document.title=osTop;

        }

    };
    topobj.οnclick=function () {
        timer=setInterval(function () {

            //獲取滾動條的滾動高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用於設置速度差，產生緩動的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用於阻止滾動事件清除定時器
            if(osTop == 0){
                clearInterval(timer);
            }

        },30);
    };

   /*
    //第二種方法無序判斷瀏覽器內核

    var topobj=document.getElementById('top');
    var clientHeight = document.documentElement.clientHeight;   //獲取可視區域的高度
    var timer = null; //定義一個定時器
    var isTop = true; //定義一個布爾值，用於判斷是否到達頂部

    window.onscroll = function(){         //滾動條滾動事件

        //獲取滾動條的滾動高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(osTop >= clientHeight){  //如果滾動高度大於可視區域高度，則顯示回到頂部按鈕
            topobj.style.display = 'block';
        }else{         //否則隱藏
            topobj.style.display = 'none';
        }

        //主要用於判斷當 點擊回到頂部按鈕後 滾動條在回滾過程中，若手動滾動滾動條，則清除定時器
        if(!isTop){

            clearInterval(timer);
        }
        isTop = false;

    };


    topobj.οnclick=function () {
        timer=setInterval(function () {

                //獲取滾動條的滾動高度
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                //用於設置速度差，產生緩動的效果
                var speed = Math.floor(-osTop / 6);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
                isTop =true;  //用於阻止滾動事件清除定時器
                if(osTop == 0){
                    clearInterval(timer);
                }

        },30);
    }
*/


</script>
</html>