onestopweb 阅读(499) 评论(0)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQ 返回顶部</title>
<link rel="stylesheet" href="base.css" />
<style>
#toTop {
	padding: 20px;
	background: #06c;
	color: #fff;
	position:fixed;
    display:none;
    bottom:100px;
    right:80px;
}
</style>
</head>
<body style="height:3000px;">
<h3 style=" text-align: center; padding-top: 40px;">阅谁问君诵,水落清香浮</h3>
<div id="toTop">返回顶部</div>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function() {
	$(window).scroll(function() {
		if($(window).scrollTop() > 100){
			$("#toTop").fadeIn(600);
		} else {
			$("#toTop").fadeOut(600);
		}
	});
	//当点击跳转链接后,回到页面顶部位置
	$("#toTop").click(function() {
		$('body,html').animate({
			scrollTop: 0
		}, 800);
		return false;
	});
});
</script>
</body>
</html>

 

PS:不兼容IE6,IE7。其他的都兼容。

 

效果图:

 

 

 

 

  • 大小: 14.9 KB