缓冲动画的JS返回顶部效果

2024-09-05 12:17:51

字体：大中小

来源：转载

供稿：网友

缓冲效果的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" content="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="http://www.aspku.com/jscss/demoimg/wall1.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>

上一篇：Js定时自动刷新的实现

下一篇：图片代替滚动条

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注