JavaScript實(shí)現(xiàn)回到頂部功能的方法-創(chuàng)新互聯(lián)

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

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(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)回到頂部功能的方法，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

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

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

這個(gè)a標(biāo)簽就是用來實(shí)現(xiàn)回到頂部的鏈接,其中 href=”javascript:;”是用來阻止a標(biāo)簽的默認(rèn)行為，因?yàn)槲覀兪且|發(fā)點(diǎn)擊事件讓滾動(dòng)條回到頂部，而不是跳轉(zhuǎn)頁(yè)面。當(dāng)然，如果你將其設(shè)置為 href=””，也會(huì)默認(rèn)跳轉(zhuǎn)到頁(yè)面頂部，但是用戶體驗(yàn)就比較差，我們主要還是想實(shí)現(xiàn)一種緩動(dòng)的效果。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 固定定位在頁(yè)面的右下角，具體位置可以通過 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)我們滾動(dòng)頁(yè)面時(shí)，如果滾動(dòng)高度大于我們電腦可視區(qū)域時(shí)再將a標(biāo)簽顯示出來，這個(gè)主要是用JS實(shí)現(xiàn)，下面會(huì)說！

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

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

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

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

        //獲取滾動(dòng)條的滾動(dòng)高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop; 

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

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

            clearInterval(timer);
        }
        isTop = false;

    }

    obtn.onclick = function(){    //回到頂部按鈕點(diǎn)擊事件
        //設(shè)置一個(gè)定時(shí)器
        timer = setInterval(function(){
            //獲取滾動(dòng)條的滾動(dòng)高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于設(shè)置速度差，產(chǎn)生緩動(dòng)的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用于阻止?jié)L動(dòng)事件清除定時(shí)器
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

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

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

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

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

廣告

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