js点击按钮返回顶部

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

胡萝卜大王驾到通通闪开

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

阅读量187

点赞数

分类专栏：曾经学习的时候写的一些很烂的笔记文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44157964/article/details/104169734

版权

曾经学习的时候写的一些很烂的笔记同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

小案例

10 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #999999;
            background-color: rgba(0, 0, 0, 0.2);
            font-size: 45px;
            line-height: 115px;
            text-align: center;
            -webkit-user-select: none;
            /* 不能被鼠标选中 */
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
            color:#fff
        }
        img{
            width: 100%;
        }
    </style>
</head>

<body>
    <div>^</div>
    <p>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1897131394,2606486471&fm=26&gp=0.jpg">
    </p>
    <p>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1897131394,2606486471&fm=26&gp=0.jpg">
    </p>
    <p>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1897131394,2606486471&fm=26&gp=0.jpg">
    </p>


        <script>
            var div,bool;
            const SPEED=100
            init()
            function init(){
                div=document.querySelector('div')
                div.addEventListener('click',clickHandler)
                window.addEventListener('scroll',scrollHandler)
                setInterval(animation,16)
            }

            function scrollHandler(e){
                if(document.documentElement.scrollTop>document.documentElement.clientHeight){
                    div.style.display='block'
                    return
                }
                div.style.display='none'
            }

            function clickHandler(e){
                bool=!bool
            }
            function animation(){
                if(!bool) return 
                if(document.documentElement.scrollTop === 0){
                    bool=false
                    return
                }
                document.documentElement.scrollTop-=SPEED
            }
        </script>
</body>

</html>