<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#test
{
border: 1px #8aae44 solid;
background-color: #eee;
padding:20px 10px 20px 10px;
margin: 0 0 0 0px;
position: absolute;
cursor: pointer;
}
p{
color:GrayText;
font-size:22pt;
font-family:华文彩云;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//滚动条事件
$(window).scroll(function() {
//获取窗口一半的高度+滚动条高度
var offsetTop = $(window).scrollTop() + $(window).height() / 2;
//改变样式 显示
$("#test").show();
//改变样式 top 高度
$("#test").animate({ top: offsetTop + "px" }, { duration: 600, queue: false });
//改变left 位置
$("#test").animate({ left: $(window).width() - 40 + "px" }, { duration: 600, queue: false });
});
//讲故事 填充测试数据
for (var i = 1; i < 999; i++) {
$("#content").append("<h2 >" + i + "个和尚！！！</h2> ");
}
$("#content").append("<h2>" + i + "</h2> 那么多和尚在干吗呢 ？ 预知后事如何，君请听下回分解！！！");
//返回顶部
$("#test").click(function() {
$("#test").animate({ top: "0px" }, { duration: 600, queue: false });
$(window).scrollTop(0, 0);
});
});
</script>
</head>
<body style="height:3000px;text-align:center">
<div id="test" style="display:none" >顶<br />部</div>
<p >从前有个小孩喜欢听故事 ！</p>
<p style="color:Gray">故事大概是这样的 从前有座山 山上有很多和尚 ！</p>
<div id="content" style="width:80%;text-align:center" ></div>
</body>
</html>