創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了灞橋免費(fèi)建站歡迎大家使用！

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

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

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

這個a標(biāo)簽就是用來實(shí)現(xiàn)回到頂部的鏈接,其中 href=”javascript:;”是用來阻止a標(biāo)簽的默認(rèn)行為，因?yàn)槲覀兪且|發(fā)點(diǎn)擊事件讓滾動條回到頂部，而不是跳轉(zhuǎn)頁面。當(dāng)然，如果你將其設(shè)置為 href=””，也會默認(rèn)跳轉(zhuǎn)到頁面頂部，但是用戶體驗(yàn)就比較差，我們主要還是想實(shí)現(xiàn)一種緩動的效果。OK，下面為a標(biāo)簽設(shè)置它的樣式：

#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標(biāo)簽通過 position:fixed 固定定位在頁面的右下角，具體位置可以通過 right 和 bottom 細(xì)調(diào)。給a標(biāo)簽設(shè)置背景圖像，就是上面這張圖片.默認(rèn)情況是顯示上半部分的圖像，即40 X 40，這里由于圖像大小的原因(40 X 80)，故可以直接將背景位置設(shè)置 left top 。

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

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

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

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

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

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

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

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

            clearInterval(timer);
        }
        isTop = false;

    }

    obtn.onclick = function(){    //回到頂部按鈕點(diǎn)擊事件
        //設(shè)置一個定時器
        timer = setInterval(function(){
            //獲取滾動條的滾動高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于設(shè)置速度差，產(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);
    }
}

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

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

新聞標(biāo)題：JavaScript實(shí)現(xiàn)回到頂部功能的方法-創(chuàng)新互聯(lián)
分享鏈接：http://jinyejixie.com/article38/depisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、外貿(mào)建站、全網(wǎng)營銷推廣、建站公司、軟件開發(fā)、網(wǎng)站排名

廣告

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