Jquery实现网页返回顶部功能

2013-09-03 14:01 ·Ab叔 1137 4 <- 点击左侧的数字“攒”一个吧

View demo      Download

第一步:建一个div

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

第二步:给这个div设计样式

#toTop {
	width:100px;
	border:1px solid #ccc;
	background:#f7f7f7;
	text-align:center;
	padding:5px;
	position:fixed;
	bottom:10px;
	right:10px;
	cursor:pointer;
	display:none;
	color:#333;
}

第三步:使用Jquery实现网页下滑时显示“返回顶部”按钮

$(window).scroll(function() {
	if($(this).scrollTop() != 0) {
		$('#toTop').fadeIn();	
	} else {
		$('#toTop').fadeOut();
	}
});

第四步:使用Jquery实现点击后到达顶部功能

$('#toTop').click(function() {
	$('body,html').animate({scrollTop:0},800);
});