返回顶部的小火箭 

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .content{
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }

        #box{
            width: 100%;
            height: 3000px;
        }

        #btn{
            width: 150px;
            height: 50px;
            position: fixed;
            bottom: 15px;
            right: 15px;
            cursor: pointer;
            letter-spacing: 3px;
            border-radius: 15px;
            background-color: #f09;
            text-align: center;
            line-height: 50px;
            font-size: 26px;
            color: wheat;
        }
    </style>

<body>
    <div class="content">
        <div id="box"></div>
        <div id="btn">回到顶部</div>
    </div>    
</body>

<script>
    var btn = document.getElementById('btn')
    var top = document.documentElement.scrollTop||document.body.scrollTop
    window.onscroll = function(){
        console.log(top)
    }
    btn.onclick = function(){
        window.scrollTo(0,0)
    }
</script>
posted @ 2021-03-20 17:55  yuanliy  阅读(10)  评论(0)  编辑  收藏  举报