js实现回到顶部界面

最新推荐文章于 2024-09-11 06:46:04 发布

净心听雨

最新推荐文章于 2024-09-11 06:46:04 发布

阅读量510

点赞数

本文链接：https://blog.csdn.net/web_xaiomengxin/article/details/99845354

版权

当前界面是没有回到顶部按钮（按钮已隐藏），当向下滑动滚动条时显示按钮，点击按钮回到顶部。
css部分:

 *{margin: 0;padding: 0}
        body{
            height: 2000px;
            background: lightskyblue;
        }
        .to-top{
            position: fixed;
            bottom: 100px;
            right: 30px;
            width:100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            text-align: center;
            line-height: 100px;
            color: #fff;
            cursor: pointer;
            display: none;
        }
        .show{
             display: block;
         }

代码部分:

只需要一个div

<body>
<div class="to-top">回到顶部</div>
</body>

js部分：

<script>
    var topBtn=document.getElementsByClassName("to-top")[0];
    //滚动时执行
    window.onscroll=function (data) {
        //获取滚动条高度
        var windScrollTop= document.documentElement.scrollTop;
        if(windScrollTop>=400){
            topBtn.classList.add("show")
        }else {
            topBtn.classList.remove("show")
        }
    };
    topBtn.onclick=function () {
        window.scrollTo(0,0)//回到顶部0px
    }
</script>