使用Jquery返回页面顶部代码

张晨的个人博客•2014-07-25•前端技术• 1988• 0•A⁺ A^-

博客页面已经添加了此返回页面顶部效果，大家可以滑动滚动条试试效果

代码由88年老陈将提供，有兴趣的可以点他名字去他微博瞧瞧。

使用了jquery和jquery.lazy实现效果，一下是相关代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>scrollview.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
	.goTop{
		position:fixed;
		display:none;
		bottom:20px;
		right:20px;
		width:50px;
		height:50px;
		background:url(image/global.png) no-repeat -165px -145px;
		text-indent:-9999em;
	}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<SCRIPT type="text/javascript">
	$(document).ready(function() {
		var a = $('<a href="#top" class="goTop" >Go to top</a>');
		a.click(function() {
			$("html,body").animate( {
				scrollTop : 0
			}, 700);
			return false
		});
		$("body").append(a);
		$(window).scroll(function() {
			if ($(this).scrollTop() > 300) {
				a.slideDown("500")
			} else {
				a.slideUp("500")
			}
		})
	});
</SCRIPT>
<script type="text/javascript" src="js/component/jquery.lazy.min.js"></script>
</head>

<body>
<div>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
测试滚动条</br>
</div>
<script type="text/javascript">
 $("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500, visibleOnly: false });
</script>
</body>
</html>

文章关键词: Jquery; 返回页面顶部

发表评论