动态带缓冲“返回顶部”代码

2024-09-05 12:18:15

字体：大中小

来源：转载

供稿：网友

动态带缓冲“返回顶部”代码，测试时候用回车代替了网页的主体内容，可能不能看到真正的滚动缓冲的效果，真正加入到你的网页后功能就完全正常显示了，本效果在兼容性方面做的也相当不错的。

<!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;	margin:0 auto;}</style></head><body><div class="main"> </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>

上一篇：分享一款自制的网页滚动条样式

下一篇：CSS实现网页“回到顶部”的效果代码

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注