網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>瀏覽器特效代碼>

緩沖動畫的JS返回頂部效果_瀏覽器特效

緩沖效果的JS返回頁首（網(wǎng)頁頂部）特效，不是用的錨點技術(shù)，是用JS判斷出來的，越出高度后會出現(xiàn)返回頂部的按鈕，點擊后頁面由快到慢返回到網(wǎng)頁頂端，操作體驗更好些。

<!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

[收藏][報錯][返回列表]

相關(guān)瀏覽器特效：

欧美日韩精品在线,国内精品久久久久久久久,一级毛片恃级毛片直播,清纯唯美亚洲综合欧美色

緩沖動畫的JS返回頂部效果_瀏覽器特效

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些