返回顶部的代码

top.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回顶部</title>
<link rel="stylesheet" type="text/css" href="core.css" />
</head>
<body>
<br>


<div style="height:2000px;">内容区</div>

<div class="go-top" id="goTop">
<a href="javascript:;" target="_self" monkey="gotop"></a>
</div>

<div id="hide" style="display:none;"></div>
<script type="text/javascript" src="core.js"></script>

</body>
</html>

core.css

.go-top{ visibility:hidden;  position:fixed; _position:absolute; bottom:160px; left:50%; 27px; height:73px; background:url(gotop.gif) no-repeat 0 0;margin-left:500px; margin-bottom:0; text-align:center; font-size:12px; line-height:13px; cursor:pointer; color:#999999;}
.go-top i{ position:relative; _left:2px; display:block; 12px; margin:0 auto; line-height:16px; height:14px; overflow:hidden;writing-mode:tb-rl;transform: rotate(90deg);-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg); font-family:"宋体"; font-weight:700;}
.go-top a{ text-decoration:none; color:#999999; outline:none;}
.go-top:hover{background-position:-29px 0;}

core.js

(function(){var G=function(H){return document.getElementById(H)};var F=function(K,J){for(var I=0,H=K.length;I<H;I++){J.apply(K[I],[I,K[I]])}};var D=function(K,J,I,H){F(I,function(L,M){if(L!=H){M.className=J}});I[H].className=K};var C=function(J){var H=[];for(var I=0;I<20;I++){if(G(J+"-"+I)){H.push(G(J+"-"+I))}else{return H}}return H};var A=function(H,J){var K=C(J.tabctrl+H);var I=C(J.tab+H);if(H==1){F(K,function(L,M){M.onclick=function(){D("","hide",I,L);D("on","",K,L);return false;}})}else{F(K,function(L,M){M.onclick=function(){D("","hide",I,L);D("on","",K,L)}})}};var B={tabctrl:"tbc",tab:"tb",num:6};for(var E=0;E<B.num;E++){A(E,B)}})();

var ele=document.getElementById("goTop");
var hide = document.getElementById('hide');
function goTop(){   
    if(ele){
  ele.onclick = function(){
    var doc = (document.documentElement.scrollTop) ? document.documentElement : document.body;
       var time;
       time = setInterval(function(){         
          doc.scrollTop -= Math.ceil(doc.scrollTop * 0.7);
    if(doc.scrollTop <= 0)  clearInterval(time);
       }, 1);
        }
    }
}
goTop();
window.onscroll = function(){
         if(ele && hide){
     var doc = (document.documentElement.scrollTop) ? document.documentElement : document.body;
     ele.style.visibility = doc.scrollTop ? 'visible' : 'hidden';
              hide.innerHTML = ''; 
   }   
}

 gotop.gif

原文地址:https://www.cnblogs.com/james1207/p/3315279.html