js實現回到頂部操作

<a href="javascript:;" id="btn" title="回到頂部"></a>

樣式：

#btn {width:40px; height:40px; position:fixed; right:25px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}

 

JS代碼如下：

window.onload = function(){
    var obtn = document.getElementById('btn');  //獲取回到頂部按鈕的ID
    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){  //如果滾動高度大於可視區域高度，則顯示回到頂部按鈕
            obtn.style.display = 'block';
        }else{         //否則隱藏
            obtn.style.display = 'none';
        }

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

            clearInterval(timer);
        }
        isTop = false;

    }

    obtn.onclick = 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);
    }
}