Return Top – 返回顶部网页按钮代码 - 任刚 · Ren Gang - 我的设计笔记 世界设计 · 设计世界

分享一个曾经自用的返回顶部按钮代码,可用于个人主页:

第一步引入JS和CSS文件:

<link rel="stylesheet" type="text/css" media="screen" href="https://www.huawenonline.com/css/top.css" />

css内容:

#returnTop {
	_display:none;
	position:fixed;
	_position:absolute;
	z-index:999;
	right:15px;
	bottom:-200px;
	_bottom:auto;
	width:36px;
	height:65px;
	text-indent:-999px;
	overflow:hidden;
	background-image:url(/img/Top.png);
	_background-image:url(/img/Top.png);
	background-repeat:no-repeat;
	background-position:0 0;
	transition:bottom 0.9s;
	-webkit-transition:bottom 0.9s;
	-moz-transition:bottom 0.9s;
	-o-transition:bottom 0.9s;
}
#returnTop:hover {
	background-position:0 -65px;
}
<script type="text/javascript" src="https://www.huawenonline.com/js/top.js"></script>
" /> Return Top – 返回顶部网页按钮代码 · 任刚 · Ren Gang - 我的设计笔记

Return Top – 返回顶部网页按钮代码

, , , , ,
26/04/2015    任刚    小贴士

Return Top – 返回顶部网页按钮代码 - 任刚 · Ren Gang - 我的设计笔记 世界设计 · 设计世界

分享一个曾经自用的返回顶部按钮代码,可用于个人主页:

第一步引入JS和CSS文件:

<link rel="stylesheet" type="text/css" media="screen" href="https://www.huawenonline.com/css/top.css" />

css内容:

#returnTop {
	_display:none;
	position:fixed;
	_position:absolute;
	z-index:999;
	right:15px;
	bottom:-200px;
	_bottom:auto;
	width:36px;
	height:65px;
	text-indent:-999px;
	overflow:hidden;
	background-image:url(/img/Top.png);
	_background-image:url(/img/Top.png);
	background-repeat:no-repeat;
	background-position:0 0;
	transition:bottom 0.9s;
	-webkit-transition:bottom 0.9s;
	-moz-transition:bottom 0.9s;
	-o-transition:bottom 0.9s;
}
#returnTop:hover {
	background-position:0 -65px;
}
<script type="text/javascript" src="https://www.huawenonline.com/js/top.js"></script>

「真诚赞赏,手留余香」

任刚 rengang.com.cn

赞助用于本站维护,手机长按识别二维码。

任刚(rengang.com.cn)整理分享,欣赏作品版权均归原作者所有,仅供学习交流。点击上方图标与好友分享!


发表回复

登 录 注 册