zoukankan      html  css  js  c++  java
  • 一个小小的返回顶部

    废话不多说上码:

    <!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{
                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>

     点击效果图

  • 相关阅读:
    $router和$route的区别
    提莫攻击
    paste命令
    数组中的第K个最大元素
    od命令
    被围绕的区域
    不用虚机不用Docker使用Azure应用服务部署ASP.NET Core程序
    面试官:对象可能会迟到,但它永远不会缺席
    Kubernetes 的层级命名空间介绍
    每日一道 LeetCode (21):对称二叉树
  • 原文地址:https://www.cnblogs.com/zqm0924/p/12616172.html
Copyright © 2011-2022 走看看