缓冲动画的JS返回顶部效果_浏览器特效

缂佸洦鈪礑edeCMS鐟欏棝顣堕弫娆戔柤娑旀壆鈹栭梻锟� 缁夌喐婀囬崝鈥虫珤闁缍夌涵鏇氱鞍閼辨棑绱� 閺冪姴鍜栫粩娆撴毐瀹搞儱鍙�,閻ф儳瀹抽弶鍐櫢娑撯偓闁款喖鍙忛弻锟�!

缓冲效果的JS返回页首（网页顶部）特效，不是用的锚点技术，是用JS判断出来的，越出高度后会出现返回顶部的按钮，点击后页面由快到慢返回到网页顶端，操作体验更好些。

<!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" mrc="text/html; charset=utf-8" />
<title>返回顶部按钮</title>
  
<style type="text/css">
body{
	font:12px Verdana, Geneva, sans-serif;
	line-height:1.2;
	text-align:center;
	margin:0px; 
}
#gotopbtn {
	width:100px;
	height:30px;
	background:#fff;
	position:fixed;
	bottom:100px;
	right:20px;
	display:none;
	cursor:pointer;
	font-size:14px;
	line-height:30px;
	border:1px solid #aaa; 
}
.main{
	width:100%;
	background:#ccc;
height:800px;
	margin:0 auto;
}
</style>
</head>
<body>
<div class="main">
<img src="/jscss/demoimg/site.gif" ><br>
</div>
<div id="gotopbtn">返回顶部</div>
<script type="text/javascript">
backTop=function (btnId){
	var btn=document.getElementById(btnId);
	var d=document.documentElement;
	window.onscroll=set;
	btn.onclick=function (){
		btn.style.display="none";
		window.onscroll=null;
		this.timer=setInterval(function(){
			d.scrollTop-=Math.ceil(d.scrollTop*0.1);
			if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
		},10);
	};
	function set(){btn.style.display=d.scrollTop?'block':"none"}
};
backTop('gotopbtn');
</script>
</body>
</html>

所属频道：浏览器特效/更新时间：2013-01-08

[收藏][报错][返回列表]

缓冲动画的JS返回顶部效果_浏览器特效

浏览器特效Rss订阅特效代码搜索

浏览器特效推荐

猜你也喜欢看这些

閺€鎯版&閸掑棔闊�