巅峰霸主 > 设计开发 > bootstrap技术分享 >

通用返回顶部按钮代码,不依赖jQuery所有源码均可使用

时间:2020-11-30 12:41:36  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:通用的不依赖jQuery返回顶部按钮代码,对所有浏览做了兼容设置,比较简单的代码……

css代码

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a, img {
	border: 0;
	vertical-align: middle;
}
.main {
	width: 920px;
	height: 800px;
	margin: 0 auto;
}
#gotopbtn {
	width: 25px;
	height: 69px;
	background: url(images/topback.gif);
	position: fixed;
	bottom: 10%;
	right: 120px;
	display: none;
	cursor: pointer;
}
*html, *html body /* 修正IE6振动bug */ {
	background-image: url(about:blank);
	background-attachment: fixed;
}
*html #gotopbtn /* IE6 头部固定 */ {
	position: absolute;
	margin: 435px 0 0 0;
top:expression(eval(document.documentElement.scrollTop));
}
</style>

topback.gif

topback.gif图片,自行下载加上或者自己制作一张好看点的图片。

HTML代码:

<div id="gotopbtn">返回顶部</div>

JavaScript代码:

<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*1);
			if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
		},10);
	};
	function set(){btn.style.display=d.scrollTop?'block':"none"}
};
backTop('gotopbtn');
</script>

完整网页代码如下,可以拷贝到本地测试:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用返回顶部按钮-dfbazhu.com</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a, img {
	border: 0;
	vertical-align: middle;
}
.main {
	width: 920px;
	height: 800px;
	margin: 0 auto;
}
#gotopbtn {
	width: 25px;
	height: 69px;
	background: url(images/topback.gif);
	position: fixed;
	bottom: 10%;
	right: 120px;
	display: none;
	cursor: pointer;
}
*html, *html body /* 修正IE6振动bug */ {
	background-image: url(about:blank);
	background-attachment: fixed;
}
*html #gotopbtn /* IE6 头部固定 */ {
	position: absolute;
	margin: 435px 0 0 0;
top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body>
<div class="main"><img src="" width="920" height="1200" ></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*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>

另外,可以指定滚动高度多少时显示返回顶部按钮,请看:bootstrap返回顶部按钮,超过多少高度显示简洁的方法 只需要修改一下css样式,就能通用于任何网站。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部