原生js實現返回頂部特效
阿新 • • 發佈:2018-10-24
程序 mar document timer margin con lse hid 監聽
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 } }
原生js實現返回頂部特效