JQ 简单的返回顶部博客分类：境-JS JQ 简单的返回顶部JQ返回顶部返回顶部

程序员文章站 2024-03-16 12:46:58

...

<!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。其他的都兼容。

效果图：
JQ 简单的返回顶部

博客分类：境-JS JQ 简单的返回顶部JQ返回顶部返回顶部