jq:
<div><a href="javascript:;" class="gotop" style="display:none;"></a></div> <style> .gotop { position: fixed; right: 25px; bottom: 25px; display: block; width: 50px; height: 50px; background: url(../images/backtop.png) no-repeat 0 0; opacity: 0.5; } </style> //返回顶部按钮 $(function(){ $(window).scroll(function(){ if($(window).scrollTop()>100){ $(".gotop").fadeIn(400); } else{ $(".gotop").fadeOut(400); } }); $(".gotop").click(function(event){ event.preventDefault(); $('html,body').animate({'scrollTop':0},500); return false; }); }); <body> <div id="backtop"> <img src="Top.jpg" /> </div> <script type="text/javascript"> var oDiv = document.getElementById('backtop'); var oImg = oDiv.getElementsByTagName('img')[0]; window.onscroll = function(){ if(scroll().top>100){ oDiv.style.display = 'block'; }else{ oDiv.style.display = 'none'; } } oImg.onclick = function(){ clearInterval(oImg.timer); oImg.timer = setInterval(function(){ var iSpeed = (0-scroll().top)/10; iSpeed = iSpeed>0? Math.ceil(iSpeed):Math.floor(iSpeed); window.scrollTo(0,scroll().top+iSpeed); if(scroll().top ==0){ clearInterval(oImg.timer); } },30) } function scroll(){ return{ 'top':document.documentElement.scrollTop+document.body.scrollTop, 'left':document.documentElement.scrollLeft+document.body.scrollLeft } } </script> </body>
