javascript中返回顶部按钮的实现
炫酷的返回顶部功能
js核心代码
window.onscroll=function(){ vart=document.documentElement.scrollTop||document.body.scrollTop; vartop_div=document.getElementById("go"); if(t>=300){ top_div.style.display="block"; }else{ top_div.style.display="none"; } } varptt=20; functionpageScroll(){ document.getElementById('flypig').style.display='block'; window.scrollBy(0,-10);//每次上升10px if(document.body.scrollTop==0){ document.getElementById('flypig').style.marginBottom=ptt+'px'; ptt=ptt+10; } scrolldelay=setTimeout('pageScroll()',2);//2毫秒重复执行一次 if(ptt>=1000){ ptt=0; document.getElementById('flypig').style.marginBottom=20+'px'; document.getElementById('flypig').style.display='none'; clearTimeout(scrolldelay); } //pageScrollends }
html
<!DOCTYPEhtml> <html> <head> <title>返回顶部按钮的实现</title> <metacharset="utf-8"/> <style> body{ margin:0px; } #flypig{ display:none; float:left; position:fixed; bottom:20px; margin-left:75%; cursor:pointer; margin-bottom:20px; } #go{ display:block; float:left; position:fixed; bottom:10px; margin-left:75%; cursor:pointer; } </style> <script> window.onscroll=function(){ vart=document.documentElement.scrollTop||document.body.scrollTop; vartop_div=document.getElementById("go"); if(t>=300){ top_div.style.display="block"; }else{ top_div.style.display="none"; } } varptt=20; functionpageScroll(){ document.getElementById('flypig').style.display='block'; window.scrollBy(0,-10);//每次上升10px if(document.body.scrollTop==0){ document.getElementById('flypig').style.marginBottom=ptt+'px'; ptt=ptt+10; } scrolldelay=setTimeout('pageScroll()',2);//2毫秒重复执行一次 if(ptt>=1000){ ptt=0; document.getElementById('flypig').style.marginBottom=20+'px'; document.getElementById('flypig').style.display='none'; clearTimeout(scrolldelay); } //pageScrollends } </script> </head> <body> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <h1style="text-align:center;">请往下滑</h1> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/><!--让你的页面足够的长--> <divstyle="display:none;float:left;position:fixed;margin-left:50%;cursor:pointer;margin-bottom:20px;"id="flypig"> <imgsrc="/wp-content/themes/Jakesoft/images/flypig.gif"></div> <divstyle="display:none;float:left;position:fixed;bottom:10px;margin-left:50%;cursor:pointer;"id="go"onclick="pageScroll()">返回顶部</div></html>
以上所述就是本文的全部内容了,希望大家能够喜欢。