回到顶部按钮

By | 2013年2月20日
去评论本文

页面底部加入HTML代码： 

<a id="go-top" href="#">Top</a>

body标签加一个ID： 

<body id="home">
...
</body>

CSS：

#go-top{
	display:none;
	position:fixed;
	bottom:10px;
	right:16px;
	z-index:99;
	background:#1BA1E2;
	text-align:center;
	text-transform:uppercase;
	font-size:11px;
	padding:10px 10px;
	color:#fff!important;
  	border-radius: 10px;
  	border-radius: 1rem;
  	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.2rem 0.1rem;
  	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.2rem 0.1rem;
  	box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.2rem 0.1rem;
}
#go-top:hover{
	text-decoration:none;
	background:#417196;
}

JS： 

<script>
jQuery(document).ready(function($) {
	$(window).scroll(function() {
		if ($(window).scrollTop() > 200) {
			$("#go-top").fadeIn()
		} else {
			$("#go-top").fadeOut()
		}
	});
	$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
	$('#go-top').click(function() {
		$body.animate({
			scrollTop: $('#home').offset().top
		},
		400);
		return false
	});
})(jQuery);
</script>