JS實現回到頂部效果

最近在慕課網看了一個案例教程——回到頂部效果（原生js實現）。由於這個效果比較實用，而且不難，所以看后也跟着實現了一次，效果還不錯，於是做做筆記，以備不時之需！

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

這個a標簽就是用來實現回到頂部的鏈接,其中 href=”javascript:;”是用來阻止a標簽的默認行為，因為我們是要觸發點擊事件讓滾動條回到頂部，而不是跳轉頁面。當然，如果你將其設置為 href=””，也會默認跳轉到頁面頂部，但是用戶體驗就比較差，我們主要還是想實現一種緩動的效果。OK，下面為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;}

     

這里將a標簽通過 position:fixed 固定定位在頁面的右下角，具體位置可以通過 right 和 bottom 細調。給a標簽設置背景圖像，就是上面這張圖片.默認情況是顯示上半部分的圖像，即40 X 40，這里由於圖像大小的原因(40 X 80)，故可以直接將背景位置設置 left top 。並且默認先隱藏a標簽，當我們滾動頁面時，如果滾動高度大於我們電腦可視區域時再將a標簽顯示出來，這個主要是用JS實現，下面會說！ a標簽的懸浮效果，其實很簡單，只要將背景圖像的位置改一下就行了，具體參考上面css代碼！

現在回到頂部按鈕的樣式有了，接下來就是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);
    }
}

那么到此，我們的回到頂部效果就可以實現了，可以拿到瀏覽器測試一下。其實回到頂部效果的實現方法不少，這里只是一種實現方案，以供參考！