JavaScript仿淘寶回到頂部效果（程式碼範例）-js教程-PHP中文網

這篇文章帶給大家的內容是JavaScript仿淘寶回到頂部效果（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

JavaScript仿淘寶回到頂部效果（程式碼範例）

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

想法：

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();
}

登入後複製

詳細程式碼如下：




    
    
    
    返回顶部效果
    


    
        返回顶部
    
    头部区域
    banner区域
    主体部分

    <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 &gt; 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>

登入後複製

更多酷炫javascript特效程式碼，盡在：

js特效大全

以上是JavaScript仿淘寶回到頂部效果（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！