一个小小的返回顶部

废话不多说上码：

<!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>
        .topBn{
            width:50px;
            height: 50px;
            font-size: 40px;
            line-height: 60px;
            border:1px solid #000000;
            text-align: center;
            box-shadow: 2px 2px 2px 2px #CCCCCC;
            transition: all 0.5s;
            outline: 1px solid #000000;
            outline-offset: 0px;
            position: fixed;
            bottom: 100px;
            right: 100px;
            display: none;
        }
        .topBn:hover
        {
            outline-offset: 20px;
        }
    </style>
</head>
<body>
    <div class="topBn">^</div>
    <img src="./img/a.png">
    <img src="./img/b.png">
    <img src="./img/c.png">
    <img src="./img/d.png">
    <img src="./img/e.png">
    <img src="./img/a.png">
    <img src="./img/b.png">
    <img src="./img/c.png">
    <img src="./img/d.png">
    <img src="./img/e.png">
    <img src="./img/a.png">
    <img src="./img/b.png">
    <img src="./img/c.png">
    <img src="./img/d.png">
    <img src="./img/e.png">
    <img src="./img/a.png">
    <img src="./img/b.png">
    <img src="./img/c.png">
    <img src="./img/d.png">
    <img src="./img/e.png">


    <script>
        var topBn;
        var bool=false;

        init();
        function init(){
            topBn=document.querySelector(".topBn");
            topBn.onclick=clickHandler;
            window.onscroll=scrollHandler;
            setInterval(enterFrame,16);
        }

        function clickHandler(){
            bool=true;
        }

        function scrollHandler(){
            if(document.documentElement.scrollTop>document.documentElement.clientHeight){
                topBn.style.display="block"
            }else{
                topBn.style.display="none";
            }
        }

        function enterFrame(){
            if(!bool) return;
            document.documentElement.scrollTop-=100;
            if(document.documentElement.scrollTop===0){
                bool=false;
            }
        }
    </script>
</body>
</html>

 

 点击效果图

 

posted @ 2020-04-01 21:47  cruor  阅读(128)  评论(0)    收藏  举报