JavaScript實現(xiàn)回到頂部功能的方法

本篇文章為大家展示了JavaScript實現(xiàn)回到頂部功能的方法，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

蜀山網(wǎng)站建設公司創(chuàng)新互聯(lián),蜀山網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為蜀山上1000+提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的蜀山做網(wǎng)站的公司定做！

最近在網(wǎng)上看了一個案例教程——回到頂部效果（原生js實現(xiàn)）。由于這個效果比較實用，而且不難，所以看后也跟著實現(xiàn)了一次，效果還不錯，于是做做筆記，以備不時之需！

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

這個a標簽就是用來實現(xiàn)回到頂部的鏈接,其中 href=”javascript:;”是用來阻止a標簽的默認行為，因為我們是要觸發(fā)點擊事件讓滾動條回到頂部，而不是跳轉頁面。當然，如果你將其設置為 href=””，也會默認跳轉到頁面頂部，但是用戶體驗就比較差，我們主要還是想實現(xiàn)一種緩動的效果。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 細調(diào)。給a標簽設置背景圖像，就是上面這張圖片.默認情況是顯示上半部分的圖像，即40 X 40，這里由于圖像大小的原因(40 X 80)，故可以直接將背景位置設置 left top 。

并且默認先隱藏a標簽，當我們滾動頁面時，如果滾動高度大于我們電腦可視區(qū)域時再將a標簽顯示出來，這個主要是用JS實現(xiàn)，下面會說！

a標簽的懸浮效果，其實很簡單，只要將背景圖像的位置改一下就行了，具體參考上面css代碼！

現(xiàn)在回到頂部按鈕的樣式有了，接下來就是JS實現(xiàn)當點擊該按鈕時緩動回到頂部的效果，代碼如下：

window.onload = function(){
    var obtn = document.getElementById('btn');  //獲取回到頂部按鈕的ID
    var clientHeight = document.documentElement.clientHeight;   //獲取可視區(qū)域的高度
    var timer = null; //定義一個定時器
    var isTop = true; //定義一個布爾值，用于判斷是否到達頂部

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

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

        if(osTop >= clientHeight){  //如果滾動高度大于可視區(qū)域高度，則顯示回到頂部按鈕
            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;
            //用于設置速度差，產(chǎn)生緩動的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用于阻止?jié)L動事件清除定時器
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

那么到此，我們的回到頂部效果就可以實現(xiàn)了，可以拿到瀏覽器測試一下。

上述內(nèi)容就是JavaScript實現(xiàn)回到頂部功能的方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前標題：JavaScript實現(xiàn)回到頂部功能的方法
當前網(wǎng)址：http://muchs.cn/article2/ihipoc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、網(wǎng)站收錄、移動網(wǎng)站建設、搜索引擎優(yōu)化、用戶體驗、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容