js制作返回顶部与导航栏吸顶效果（固定定位）

大脸胖柴

已于 2022-06-18 14:31:31 修改

阅读量599

点赞数

文章标签： javascript 前端 js

于 2022-04-20 21:13:59 首次发布

本文链接：https://blog.csdn.net/tky666/article/details/124307432

版权

效果：（图片已删，可自行添加）此处运用了滚动条时间

<!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>
            .bg {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;
                height: 2000px;
                background-color: rgb(122, 232, 223);
            }
            .bg .yanse {
                width: 100%;
                height: 200px;
                text-align: center;
                background-color: rgb(81, 151, 192);
            }
            .bg #dh {
                height: 100px;
                line-height: 100px;
                background-color: rgb(164, 199, 209);
            }
            #go {
                position: fixed;
                right: 20px;
                top: 80%;
                width: 80px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                border-radius: 25px;
                background-color: rgb(91, 139, 198);
            }
        </style>
    </head>
    <body>
        <div class="bg">
            <div id="dh" class="yanse">导航</div>
            <div class="yanse"></div>
            <div class="yanse"></div>
            <div class="yanse"></div>
            <div class="yanse"></div>
            <div class="yanse"></div>
            <div class="yanse"></div>
        </div>
        <button id="go">回到顶部</button>
    </body>
    <script>
        // 顶部吸顶（定位）内容
        var _dh = document.getElementById("dh");
        var gdsz1;
        window.onscroll = function () {
            //给window(浏览器)添加滚动条事件
            gdsz1 = document.documentElement.scrollTop; // 要在函数内部赋值才可用
            // console.log(gdsz1);
            if (gdsz1 >= 100) {
                //添加固定定位条件  100为设置的导航高度
                _dh.style.position = "fixed";
                _dh.style.top = "0px";
                _dh.style.left = "0px";
            } else {
                _dh.style.position = "";
            }
        };
        // 返回顶部内容
        //滚动条要配合计时器使用才可达到效果
        var _go = document.getElementById("go"); //先获取元素
        // console.log(_go);

        var gdsz2; //将页面滚动条距离顶部高度的数值赋值给变量“滚动数值：gdsz” 要在函数内部赋值才可用
        // console.log(gdsz2);//查看是否成功
        var timer2 = null; //声明计时器
        _go.onclick = function () {//为元素添加事件
            clearInterval(timer2); //先清除计时器再开启 防止多次点击多个计时器叠加
            timer2 = setInterval(function () {
                document.documentElement.scrollTop -= 20; //高度值每次减少数值  累减
                gdsz2 = document.documentElement.scrollTop; // 要在函数内部赋值才可用
                // console.log(gdsz2);
                if (gdsz2 <= 0) {
                    //计时器停止条件
                    clearInterval(timer2);
                }
            }, 10);
        };
    </script>
</html>

大脸胖柴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js制作返回顶部与导航栏吸顶效果（固定定位）

效果：（图片已删，可自行添加）此处运用了滚动条时间<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=devi.
复制链接

扫一扫