炫酷的返回頂部功能
js核心代碼
window.onscroll = function(){   var t = document.documentElement.scrollTop || document.body.scrollTop;   var top_div = document.getElementById( "go" );   if( t >= 300 ) {     top_div.style.display = "block";   } else {     top_div.style.display = "none";   } }   var ptt=20;function pageScroll() { 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);}//pageScroll ends}     html
<!DOCTYPE html><html><head> <title>返回頂部按鈕的實現</title> <meta charset="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(){   var t = document.documentElement.scrollTop || document.body.scrollTop;   var top_div = document.getElementById( "go" );   if( t >= 300 ) {     top_div.style.display = "block";   } else {     top_div.style.display = "none";   } }  var ptt=20;function pageScroll() { 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);}//pageScroll ends}     </script></head><body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h1 style="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 /><!--讓你的頁面足夠的長--><div style="display: none; float: left; position: fixed; margin-left: 50%; cursor: pointer; margin-bottom: 20px;" id="flypig"><img src="/wp-content/themes/Jakesoft/images/flypig.gif">    </div><div style="display: none; float: left; position: fixed; bottom: 10px; margin-left: 50%; cursor: pointer;" id="go" onclick="pageScroll()">返回頂部</div></html>以上所述就是本文的全部內容了,希望大家能夠喜歡。
新聞熱點
疑難解答