2012十二月11
JS源码:网页滚动右下角出现返回顶部goTop
效果如图:
直接贴代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE> Wizzer.cn </TITLE> <style type="text/css" media="screen"> #goTop {position:fixed;right:20px;bottom:20px;width:40px;height:32px;padding:8px 0 0;background-color:#69c;border-radius:6px;cursor:pointer;} #goTop:hover {background-color:#369;} #goTop:hover .gotop1 {border-left:12px solid #369;border-right:12px solid #369;} #goTop .gotop1 {width:0;margin:0 auto;border-bottom:12px solid #FFF;border-left:12px solid #69c;border-right:12px solid #69c;} #goTop .gotop2 {width:10px;height:10px;margin:0 auto;background-color:#FFF;} </style> </HEAD> <BODY> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> a<br><br> <div title="返回顶部" id="goTop" style="display:none;"> <div class="gotop1"></div> <div class="gotop2"></div> </div> <script type="text/javascript"> function $getId(Id) { return document.getElementById(Id); } var goTop = $getId("goTop"); window.onscroll = function () { if (document.documentElement.scrollTop + document.body.scrollTop > 350) { goTop.style.display = ""; } else { goTop.style.display = "none"; } } goTop.onclick = function () { var Timer = setInterval(GoTop, 10); function GoTop() { if (document.documentElement.scrollTop + document.body.scrollTop < 1) { clearInterval(Timer); } else { document.documentElement.scrollTop /= 1.1; document.body.scrollTop /= 1.1; } } } </script> </BODY> </HTML>
本文地址:https://wizzer.cn/archives/2485 , 转载请保留.
这个东西不错,回头试用一下