js制作回到顶部

初始页面:

 

js制作回到顶部

js制作回到顶部

 

HTMl代码:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>响应换图</title>

    <link rel="stylesheet" href="style.css">

</head>

 

<body>

    <div class="box">

        <img src="0.jpeg" alt="">

    </div>

    <div class="box">

        <img src="1.jpg" alt="">

    </div>

    <div id="Htop">顶部</div><!--回到顶部的按钮-->

    <script src="jquery-3.3.1.min.js"></script><!—jq必备的-->

    <script src="script.js"></script>

</body>

</html>

 

CSS代码:

position: fixed;把按钮固定在可视区域中

Z-index:属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

 

text-transform: 使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果您以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。

 

cursor: pointer;改变光标的形状。

 

@charset "utf-8";

/* CSS Document */

*{

    padding: 0;

    margin: 0;

}

.box{

    width: 700px;

    height: 500px;

    margin: auto;

    margin-bottom: 600px;

}

.box img{

    width: 700px;

    height: 500px;

}

#Htop{

    position: fixed;

    width: 50px;

    height: 50px;

    line-height: 50px;

    border: 2px double #900;

    text-align: center;

    right: 30px;

    bottom: 20px;

    border-radius: 5px;

    font-weight: 600;

    text-transform: uppercase;

    background: #ff4000;

    cursor: pointer;

    z-index: 999999999;

}

 

 

Js代码:

 

 

 

// JavaScript Document

window.onload = function(){

    Htop();/*调用*/

}

function Htop(){

    var Htop=document.getElementById("Htop");

    Htop.style.display = "none";/*隐藏按钮*/

    $('html, body').animate({/*刷新回到顶部*/

           scrollTop: 0

        }, 5);

         $("#Htop").click(function(){/*点击按钮回到顶部*/

                  $('html, body').animate({

           scrollTop: 0

        }, 1000);

         })

         window.onmousewheel=function(){

                          if(document.documentElement.scrollTop>300){

                                   Htop.style.display = "block";/*显示按钮*/

                                   Htop.οnclick=function(){/*点击按钮回到顶部,并且隐藏按钮*/

                                            document.documentElement.scrollTop = "0px";/*滚动条回到顶部*/

                                            Htop.style.display = "none";/*隐藏按钮*/

                                   }

                          }else{

                                   Htop.style.display = "none";/*隐藏按钮*/

                          }

         }

}

 

 

上一篇:Linux性能监控-htop


下一篇:Docker 容器内分析 java程序占用 cpu 高问题排查分析