index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link herf="index.css"> </head> <body> <span id="icon"></span> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> <script src="scroll.js"></script> <script src="index.js"></script> </body> </html>
index.css
*{ padding: 0; margin: 0; border: none; list-style: none; } body{ background-color: #ddd; } p{ text-align: center; font-size: 25px; margin-bottom: 30px; } #icon{ width: 43px; height: 43px; background: url("./images/to_top.png") no-repeat; background-size: 100% 100%; position: fixed; bottom: 15px; right: 20px; display: none; }
index.js
window.onload=function(){ //定义变量 let scroll_top=0; let begin=0,end=0,timer=null; //监听窗口滚动事件 window.onscroll=function(){ scroll_top=scroll().top; //显示和隐藏 scroll_top>0?show($("icon")):hidden($("icon")); } //监听图标的点击事件 $("icon").onclick=function(){ //清除定时器 clearInterval(timer); //开启定时器 timer=setInterval(function(){ begin+=(end-begin)*0.2; window.scrollTo(0,begin); //判断运动结束条件，清除定时器 if(Math.round(begin)===end){ clearInterval(timer); } },30); } } function $(id){ return typeof id==="string"?document.getElementById(id):null; } function show(obj){ return obj.style.display="block"; } function hidden(obj){ return obj.style.display="none"; }
scroll.js
function scroll(){ if(pageYOffset!==null){ return { top:window.pageYOffset, left:window.pageXOffset } }else if(document.compatMode===CSS1Compat){ return { top:document.documentElement.scrollTop, left:document.documentElement.scrollLeft } } return { top:document.body.scrollTop, left:document.body.scrollLeft } }