如何用JavaScript實(shí)現(xiàn)返回頂部按鈕

本篇內(nèi)容主要講解“如何用JavaScript實(shí)現(xiàn)返回頂部按鈕”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何用JavaScript實(shí)現(xiàn)返回頂部按鈕”吧!

1.先搭架子

a {
            text-decoration: none;
    }
        
        body {
            height: 5000px;
        }
        
        .backtotop {
            position: fixed;
            bottom: 80px;
            right: 80px;
            width: 80px;
            height: 80px;
            background-color: #ccc;
            font-size: 20px;
            text-align: center;
            padding-top: 12px;
            box-sizing: border-box;
            cursor: pointer;
            color: #000;
            /* 先隱藏按鈕 */
            /*display: none;*/
        }

<a href="javascript:;" class="backtotop" id="backtotop">返回<br>頂部</a>

2.邏輯部分

當(dāng)鼠標(biāo)點(diǎn)擊“返回頂部”按鈕時(shí)，則會(huì)以每50毫秒的周期以一定“速度”返回到頂部，回到頂部之后則要進(jìn)行清除，否則將出現(xiàn)只要一往下拉頁(yè)面就會(huì)自動(dòng)返回頂部的現(xiàn)象
在這里就要用到兩個(gè)方法一個(gè)是 setInterval，一個(gè)是clearInterval，前者是設(shè)置定時(shí)器，后者為清除定時(shí)器
 在這里要注意一點(diǎn)的是，為了不引起沖突，在設(shè)置定時(shí)器之前要進(jìn)行“設(shè)表先關(guān)”
 最后為了增加用戶(hù)的體驗(yàn)感，我們需要設(shè)計(jì)成，當(dāng)前如果是在頂部時(shí)，那么“返回頂部”按鈕就會(huì)自動(dòng)隱藏；當(dāng)前如果不在頂部時(shí)，“返回頂部”按鈕就顯示

.backtotop {
    /* 先隱藏按鈕 */
    display: none;
}

(function() {
      // 1.拿到需要操作的元素
      let oBackBtn = document.querySelector("#backtotop"); 
      // 2.監(jiān)聽(tīng)網(wǎng)頁(yè)的滾動(dòng)
      window.onscroll = function() {
                // 獲取滾動(dòng)出去的距離
                let offsetY = getPageScroll().y;
                // console.log(offsetY);
 
                // 判斷是否需要顯示回滾按鈕
                if (offsetY >= 200) {
                    oBackBtn.style.display = "block";
                } else {
                    oBackBtn.style.display = "none";
                }
            }
 
            let timerId = null;
 
            // 3.監(jiān)聽(tīng)回滾按鈕的點(diǎn)擊
            oBackBtn.onclick = function() {
 
                //設(shè)表先關(guān)，防止定時(shí)器沖突
                clearInterval(timerId);
 
                //設(shè)置定時(shí)器
                timerId = setInterval(function() {
                    let begin = getPageScroll().y; //當(dāng)前位置
                    let target = 0; //目標(biāo)位置
                    let step = (target - begin) * 0.3;
                    begin += step;
 
                    //判斷是否結(jié)束
                    if (Math.abs(Math.floor(step)) <= 1) {
 
                        //清除定時(shí)器
                        clearInterval(timerId);
 
                        // window.scrollTo(x, y);
                        // x表示讓網(wǎng)頁(yè)在水平方向滾動(dòng)到什么位置
                        // y表示讓網(wǎng)頁(yè)在垂直方向滾動(dòng)到什么位置
                        window.scrollTo(0, 0);
                        return;
                    }
 
                    window.scrollTo(0, begin);
 
                }, 50);
            };
 
            function getPageScroll() {
                let x, y;
                if (window.pageXOffset) {
                    x = window.pageXOffset;
                    y = window.pageYOffset;
                } else if (document.compatMode === "BackCompat") {
                    x = document.body.scrollLeft;
                    y = document.body.scrollTop;
                } else {
                    x = document.documentElement.scrollLeft;
                    y = document.documentElement.scrollTop;
                }
                return {
                    x: x,
                    y: y
                }
            }
        })();

到此，相信大家對(duì)“如何用JavaScript實(shí)現(xiàn)返回頂部按鈕”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！