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
分享到：
相关推荐
弹性返回顶部代码，美观实用又简单的代码，兼容各大浏览器
一款不错的网站客服代码，jQuery右侧边栏二维码QQ客服返回顶部代码。
JS效果返回顶部代码，学习时写的，如有问题请留言。javascript返回顶部代码
jquery返回顶部代码，底部小火箭样式，点击返回顶部
返回顶部代码.返回顶部.htm引用代码
jQuery右端悬浮带返回顶部代码
jQuery可变透明度返回顶部代码 第二屏才会显示top 且透明度会越老越低
Metro扁平风格网页右侧返回顶部代码，非常不错的代码
jeuery带微信二维码的返回顶部代码
seajs jquery框架实现可爱的卡通人物动画返回顶部代码
jQuery绿色QQ在线客服返回顶部代码基于jquery-1.10.2.min.js制作，固定悬浮显示在页面右侧，有QQ在线客服，电话客服，返回页面顶部等功能。
jQuery仿威锋商城网站右侧悬浮层返回顶部代码
很漂亮的一个慢慢滑倒顶部的代码！！有好几种颜色可选！！
摘要: 此代码效果：超出首屏范围，即会出现TOP按钮，否则自动隐藏。 下载附件，放到网站的根目录，然后在网站的对应页面放入一下代码： 此代码效果：超出首屏范围，即会出现TOP按钮，否则自动隐藏。 下载附件，放到...
代码简介：jQuery平滑返回顶部代码是一款实用的带二维码jQuery返回顶部代码。
Jquery返回顶部代码，兼容各种浏览器，使用简单。直接页面加链接。
此代码内容为jQuery火箭点火升空返回顶部代码，属于站长常用代码，更多悬浮漂浮代码请访问懒人图库JS代码频道。
图翼网侧边jQuery返回顶部代码是一款鼠标经过二维码图标会显示微信二维码，点击指南图标会弹出自定义的弹出层，点击返回顶部图标会跳转到页面顶部。