JS实现回到顶部

最新推荐文章于 2024-03-19 10:15:00 发布

氢生锈了

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量795

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_73842669/article/details/128668680

版权

JS实现回到顶部

实现下滑页面时出现回到顶部按钮

实现回到顶部的缓冲

注释原理如下：

<style>
        .header{height: 2000px;}


        .top {
            width: 100%;
            height: 200px;
        }

        .weixianshi {
            position: fixed;
            right: 40px;
            bottom: 40px;
            height: 80px;
            width: 80px;
            border-radius: 100px;
            display: none;
        }

        .xianshi {
            position: fixed;
            display: block;
            right: 30px;
            bottom: 300px;
            height: 80px;
            width: 80px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="top"></div>
    <button id="btn" class="weixianshi">返回</button>
    <script>
        window.onscroll = function () {
            console.log(document.documentElement.scrollTop || document.body.scrollTop)
            if ((document.documentElement.scrollTop || document.body.scrollTop) > 200) //判断页面的滚动距离
             {
                btn.className = "xianshi" // 当距离大于200时，将它的classname赋成item2
            }else{
                btn.className = "weixianshi" // 当距离小于200时，它的classname不变
            }
        }

        btn.onclick=function toTop() {
            timer = setInterval( function()   //定时器，判断滚动条的滚动高度
            {       
                var scrollTop = document.documentElement.scrollTop          
                var speed = Math.floor(-scrollTop / 10); //此处根据页面的滚动位置以改变它的速度
                document.documentElement.scrollTop = scrollTop + speed;
                if(scrollTop == 0){        //清除定时器
                    clearInterval(timer);
                }
            }, 10);
        }