一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 鼠标特效

推荐专题

最新下载

1

狂梗小朋友游戏
64.87MB 类型： 休闲益智
2

数字赛车
15.6MB 类型： 休闲益智
3

猫和老鼠测试版
912.34M 类型： 休闲益智
4

猫和老鼠旧版本游戏
912.34M 类型： 休闲益智
5

选择大师手机版
51.95MB 类型： 休闲益智
6

火把烧木头
11.32MB 类型： 休闲益智
7

五毒大作战最新版
62.65MB 类型： 休闲益智
8

蛋仔派对网易版
1.97GB 类型： 休闲益智
9

魔法娃娃假日免费版
211.22MB 类型： 休闲益智
10

oppo猫和老鼠官方手游
1.64GB 类型： 休闲益智

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

带缓动效果返回顶部JS特效代码

时间：2022-06-25 20:17:01 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body{position:relative;margin:0;padding:55px 0 0 0;}
#demo_menu{position:absolute;top:0;left:0;width:100%;line-background:url(/statics/images/my/menu_bg.png) repeat-x;z-index:800;font-size:14px;text-align:center;color:#999;line-height:180%;border-bottom:1px solid #8A961C;}
#demo_menu .top_menu{margin:0 auto;color:#000;font-size:12px;overflow:hidden;z-index:1000;}
#demo_menu .top_menu strong{display:block;float:left;background:url(/statics/images/my/logo.png) no-repeat 0 8px;}
#demo_menu .top_left{float:left;line-z-index:9999;overflow:hidden;}
#demo_menu .top_left ul{float:right;overflow:hidden;list-style: none;margin:0;padding:0;}
#demo_menu .top_left li{float:left;margin:0 15px 0 0;padding:0;text-align:center;}
#demo_menu .top_left li a,#demo_menu .top_left li a:visited{font-size:14px;font-weight:bold;color:#333;text-decoration:none;display:block;line-}
#demo_menu .top_left li a:hover,#demo_menu .top_left li a:hover span{cursor:pointer;color:#fff;text-decoration:none;}
#demo_menu .top_left a,#demo_menu .top_left a:visited{font-size:12px;white-space:nowrap;color:#fff;font-family:"宋体", "Times New Roman", Times, serif;line-height:140%;}
#demo_menu .top_left a:hover{color:#000;font-family:"宋体", "Times New Roman", Times, serif;}
#demo_menu .top_right{float:right;padding:8px 0 0 0;z-index:1000;}
#bdshare{margin:-5px 0 0 0;}

.page {width:100%;  text-align: center; margin-bottom:10px; line- font-size:80px; font-family:Arial; text-shadow:3px 3px 10px #fff;}
#rtt {  background:url('../images/rrt.png'); background-size:cover; position:fixed; right:50px; bottom:50px; border-radius: 5px; z-index:1000; display:none;}
h1{text-align:center;}
</style><title>返回顶部JS特效代码 带缓动效果
</title>

<script type="text/javascript" >

function myEvent(obj,ev,fn){
	if(obj.attachEvent){
		obj.attachEvent('on'+ev,fn);
	}else{
		obj.addEventListener(ev,fn,false);
	}
}
myEvent(window,'load',function(){
	var oRTT=document.getElementById('rtt');
	var pH=document.documentElement.clientHeight;
	var timer=null;
	var scrollTop;
	window.onscroll=function(){
		scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
		if(scrollTop>=pH){
			oRTT.style.display='block';
		}else{
			oRTT.style.display='none';
		}
		return scrollTop;
	};
	oRTT.onclick=function(){
		clearInterval(timer);
		timer=setInterval(function(){
			var now=scrollTop;
			var speed=(0-now)/10;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(scrollTop==0){
				clearInterval(timer);
			}
			document.documentElement.scrollTop=scrollTop+speed;
			document.body.scrollTop=scrollTop+speed;
		}, 30);
	}
});</script>
</head>
<body>
<div id='rtt'>返回顶部，这里可换成图片</div>
<h1>带缓动效果的返回顶部JS特效代码</h1>
<div class='page' style='background:#ccc;'>Page 1</div>
<div class='page' style='background:#999;'>Page 2</div>
<div class='page' style='background:#ccc;'>Page 3</div>
<div class='page' style='background:#999;'>Page 4</div>
<div class='page' style='background:#ccc;'>Page 5</div>
<div class='page' style='background:#999;'>Page 6</div>

</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

相关文章

热门栏目