<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>返回顶部</title> <style type="text/css"> *{margin:0; padding:0;} a{text-decoration:none;} a:hover{opacity:0.7;} .demo{height:2000px;} #oA{width:20px;line-height: 1.2;padding:7px 0px 7px 2px;background-color:#FF82AB;color:blue;font-size:12px;text-align: center;position: fixed;right:0px;bottom:50px;cursor:pointer; opacity: 0.5;filter:Alpha(opacity=50);border-radius:5px 0 0 5px;display:none;} </style> <script> window.onload=function(){ var oA=document.getElementById("oA"); fn(); function fn(){ var timer=null; function view(){ return{ W:window.innerWidth||(document.documentElement&&document.documentElement.clientWidth)||document.body.clientWidth, H:window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight }; } function getScrollTop(){ return document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop; } function ie6Top(){ if(!window.XMLHttpRequest){ oA.style.top=getScrollTop()+view().H-200+"px"; } } window.onscroll=function(){ oA.style.display=getScrollTop()>0?"block":"none"; ie6Top(); } oA.onclick=function(){ timer=setInterval(function(){ var scrollTop=getScrollTop(); var backSpeed=Math.floor(-scrollTop/6); console.log(scrollTop) if(scrollTop<=0){ clearInterval(timer); timer=null; } console.log(timer) ie6Top(); document.documentElement.scrollTop=document.body.scrollTop=scrollTop+backSpeed; },30) } } } </script> </head> <body> <div class="demo">可以滑动右侧滚动条</div> <a href="javascript:void(0)" className="backtop" id="oA">返回顶部</a> </body> </html>
