b站pink老师JavaScript的PC端网页特效案例代码——仿淘宝返回顶部(带有动画的返回顶部)

快意人生大社畜

已于 2023-07-06 18:43:34 修改

阅读量526

点赞数 1

分类专栏： JavaScript 文章标签：动画

于 2022-09-16 11:12:50 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/126886710

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

目标效果：

在之前写好的

的代码基础上

实现点击返回顶部字样，即可用缓动动画返回顶部【见代码段中4.和动画函数部分】

重点语法：

滚动窗口至文档中的特定位置

window.scroll(x,y)

x,y不写单位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
            /* 最开始goBack设置的是隐藏 */
            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');
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        //element.offsetTop如果该元素 没有父亲/父亲没有定位,则返回 距离body上方的偏移量(返回值无单位)
        //banner以上到body的距离
        // console.log(banner.offsetTop);
        var bannerTop = banner.offsetTop;
        //console.log(sliderbar.offsetTop);
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        var mainTop = main.offsetTop;
        //2.页面滚动事件
        //因为是页面滚动，所以事件源是document
        document.addEventListener('scroll', function () {
            //获取页面被卷去的头部
            // console.log(window.pageYOffset);
            //  3 .当页面被卷去的头部大于等于了 bannerTop时 侧边栏sliderbar就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                //恢复为之前的绝对定位
                sliderbar.style.position = 'absolute';
                //恢复为之前的top值
                sliderbar.style.top = '300px';
            }
            //  3 .当页面滚动到main盒子，就显示 goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
        // 4.当点击返回顶部模块，就让窗口滚动到页面最上方
        goBack.addEventListener('click', function () {
            // 因为是窗口滚动，所以对象是window
            // 由于要滚到最顶端，y坐标是0
            animate(window, 0); //调用函数
        })
        // 动画函数
        // 将之前写好的animate.js缓动动画函数复制过来，将其中left相关都改为垂直相关
        function animate(obj, target, callback) {
            //先清除之前的定时器，只保留当前的一个定时器
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                // 1.步长值写在定时器里面 步长值=（目标值-现在的位置）/10
                // window.pageYoffset返回整个页面被卷去的头部的距离
                var step = Math.ceil(target - window.pageYOffset) / 10;
                //判断步长的正负
                // 如果步长为正，往大里取整 Math.ceil
                // 如果步长为负，往小里取整 Math.floor
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                // 2.当盒子位置=目标位置，停止定时器
                if (window.pageYOffset == target) {
                    //用停止定时器的方式 停止动画
                    clearInterval(obj.timer);
                    // 如果有回调函数，调用回调函数
                    if (callback) {
                        callback();
                    }
                }
                // 3.把之前每次加1,改为一个慢慢变小的步长值 步长值=（目标值-现在的位置）/10
                //window.scroll(x,y) 滚动窗口至文档中特定位置   x,y不要加单位
                window.scroll(0, window.pageYOffset + step)
            }, 15)
        }
    </script>
</body>

</html>