JavaScript實現回到頂部功能

發布時間：2020-06-21 19:26:45 來源：億速云閱讀：153 作者：鴿子欄目：web開發

需求：當滾動條到一定位置時側邊欄固定在某個位置，再往下滑動到某一位置時顯示回到頂部按鈕。點擊按鈕后頁面會動態滑到頂部，速度由快到慢向上滑。

思路：

1、頁面加載完畢才能執行js代碼

　　可以將js代碼寫在最下邊（本次回頂示例是用的這種）

　　想寫在上邊可以用下邊這兩種：

　　 ①window.onload = function() {...}

　　　②window.addEventListener('load', function() {...})

2、獲取需要用到的元素

3、綁定滾動事件 scroll

當用戶滾到banner模塊時使側邊欄變為固定狀態

if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滾上去的距離
    sliderbar.style.position = 'fixed';   // 當用戶滾到banner模塊時使側邊欄變為固定狀態
    sliderbar.style.top = sliderbarTop + 'px'; 
} else {
    sliderbar.style.position = 'absolute';
    sliderbar.style.top = '300px';
}

當用戶滾到main模塊時顯示返回頂部按鈕

 if(window.pageYOffset >= mainTop) {    // 當用戶滾到main模塊時顯示返回頂部按鈕
     goBack.style.display = 'block';
 } else {
     goBack.style.display = 'none';
 }

4、綁定點擊事件 click

點擊返回頂部按鈕后頁面會動態滑到頂部，速度由快到慢向上滑動

 sliderbar.addEventListener('click', function() {
     animate(window, 0);
 })

5、關于動畫函數 animate(obj, target, callback)

這里obj對象即是window；target目標位置即是0；callback是回調函數，沒傳參的話就可以忽略

設置一個定時器 setInterval();

聲明一個step作為步長值，值為頂部位置到當前滾動條位置之差除以10（step會越來越小，滾動速度也就越來越慢，實現了滾動條的速度由快到慢的滑上去）

var step = (target - window.pageYOffset) / 10;

然而step并不總是整數，當step不是整數時可以讓滾動條再往前走一丟丟。滾動條可以上下滑動，所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整

step = step > 0 ? Math.ceil(step) : Math.floor(step);

window.scroll(x, y) 滾動到文檔特定位置，定時器每次調用函數都會往上滑一點

window.scroll(0, window.pageYOffset + step);

判斷動畫是否執行完畢，如果執行完畢則關閉定時器 clearInterval();

if(window.pageYOffset == target) {  // 當頁面回到頂部后(即動畫執行完) 清除定時器
    clearInterval(obj.timer);
    //  判斷是否傳了回調函數
    /* if(callback) { 
        callback();
    } */
    // 可以簡寫為下邊這種。 &&是短路運算符，存在callback（即第一個式子為true）時才會繼續執行callback()
    callback && callback();
}

詳細代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>返回頂部效果</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 47%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
            cursor: pointer;
        }
        .w {
            width: 1100px;
            margin: 10px auto;
        }
        .header {
            height: 150px;
            background-color: purple;
        }
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>
        <span>返回頂部</span>
    </div>
    <div class="header w">頭部區域</div>
    <div class="banner w">banner區域</div>
    <div class="main w">主體部分</div>

    <script>
        // querySelector() 方法返回匹配指定選擇器（）的第一個元素，傳的必須是字符串
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop; // banner模塊距離頂部的長度
        var sliderbarTop = sliderbar.offsetTop - bannerTop; // 側邊欄固定后距離頂部的長度

        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;  // main模塊距離頂部的長度
        
        // scroll 屏幕發生滾動事件時執行
        document.addEventListener('scroll', function() {
            if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滾上去的距離
                sliderbar.style.position = 'fixed';   // 當用戶滾到banner模塊時使側邊欄變為固定狀態
                sliderbar.style.top = sliderbarTop + 'px'; 
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            
            if(window.pageYOffset >= mainTop) {    // 當用戶滾到main模塊時顯示返回頂部按鈕
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
            
        });
        sliderbar.addEventListener('click', function() {
            animate(window, 0);
        })

        /* 動畫函數：
         *  obj 做動畫的對象（這里就是指window）
         *  target 目標位置（頂部）
         *  callback 回調函數（沒有傳參的話就不執行）
         */
        function animate(obj, target, callback) {
            clearInterval(obj.timer);  // 先清除定時器，保證只有一個定時器在執行，以免出現bug
            obj.timer = setInterval(function() {
                // window.pageYOffset距離頂部的距離（是負的）
                var step = (target - window.pageYOffset) / 10;  // step步長（讓頁面速度逐漸變慢的滑動上去）
                step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不總是整數。大于零向上取整,小于零向下取整
                if(window.pageYOffset == target) {  // 當頁面回到頂部后(即動畫執行完) 清除定時器
                    clearInterval(obj.timer);
                    //  判斷是否傳了回調函數
                    /* if(callback) { 
                        callback();
                    } */
                    // 可以簡寫為下邊這種。 &&是短路運算符，存在callback（即第一個式子為true）時才會繼續執行callback()
                    callback && callback();
                }
                // window.scroll(x, y) 滾動到文檔特定位置
                window.scroll(0, window.pageYOffset + step);
            }, 15);
        }
    </script>
</body>
</html>

以上就是JavaScript仿淘寶回到頂部效果（代碼示例）的詳細內容，更多請關注億速云其它相關文章！

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

JavaScript實現回到頂部功能

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

JavaScript實現回到頂部功能

猜你喜歡

最新資訊

相關推薦

相關標簽