初始页面：
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";/*隐藏按钮*/ } } } |