`

JQ 简单的返回顶部

JQ 简单的返回顶部JQ返回顶部返回顶部 
阅读更多 
<!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
1
顶
1
踩
分享到：
| JS 简单的点击返回顶部的功能
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics