js原生缓慢返回顶部函数封装

我就是我 2023-07-08 02:49 8阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    
    <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>Document</title>
        <style>
            .slider-bar {
                position: absolute;
                left: 50%;
                top: 300px;
                margin-left: 600px;
                width: 45px;
                height: 130px;
                background-color: pink;
            }
            
            .w {
                width: 1200px;
                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 class="slider-bar">
            <span class="goBack">返回顶部</span>
        </div>
        <div class="header w">头部区域</div>
        <div class="banner w">banner区域</div>
        <div class="main w">主体部分</div>
        <script>
            //1. 获取元素
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
            var bannerTop = banner.offsetTop
                // 当我们侧边栏固定定位之后应该变化的数值
            var sliderbarTop = sliderbar.offsetTop - bannerTop;
            // 获取main 主体元素
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;
            // 2. 页面滚动事件 scroll
            document.addEventListener('scroll', function() {
                    // console.log(11);
                    // window.pageYOffset 页面被卷去的头部
                    // console.log(window.pageYOffset);
                    // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
                    if (window.pageYOffset >= bannerTop) {
                        sliderbar.style.position = 'fixed';
                        sliderbar.style.top = sliderbarTop + 'px';
                    } else {
                        sliderbar.style.position = 'absolute';
                        sliderbar.style.top = '300px';
                    }
                    // 4. 当我们页面滚动到main盒子，就显示 goback模块
                    if (window.pageYOffset >= mainTop) {
                        goBack.style.display = 'block';
                    } else {
                        goBack.style.display = 'none';
                    }
    
                })
                // 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
            goBack.addEventListener('click', function() {
                // 里面的x和y 不跟单位的 直接写数字即可
                // window.scroll(0, 0);
                // 因为是窗口滚动 所以对象是window
                animate(window, 0);
            });
            // 动画函数
            function animate(obj, target, callback) {
                // console.log(callback);  callback = function() {}  调用的时候 callback()
    
                // 先清除以前的定时器，只保留当前的一个定时器执行
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    // 步长值写到定时器的里面
                    // 把我们步长值改为整数 不要出现小数的问题
                    // var step = Math.ceil((target - obj.offsetLeft) / 10);
                    var step = (target - window.pageYOffset) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (window.pageYOffset == target) {
                        // 停止动画 本质是停止定时器
                        clearInterval(obj.timer);
                        // 回调函数写到定时器结束里面
                        // if (callback) {
                        //     // 调用函数
                        //     callback();
                        // }
                        callback && callback();
                    }
                    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                    // obj.style.left = window.pageYOffset + step + 'px';
                    window.scroll(0, window.pageYOffset + step);
                }, 15);
            }
        </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224203246219.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70