javascript中返回顶部按钮的实现

炫酷的返回顶部功能
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>

以上所述就是本文的全部内容了，希望大家能够喜欢。