返回顶部的代码
2013-09-11 16:47
239 查看
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%; width: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; width: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
<!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%; width: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; width: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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐