本代码基于jQuery，所以需要在当前页面中引入jQuery框架支持，如果你的站点原来已经存在jQuery框架，只需在当前页面引入即可！先来看完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回顶部代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
@charset "utf-8";
html, body, h1, h2, h3, h4, h5, h6, hr, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, img { margin:0; padding:0; }
body, button, input, select, textarea { font:14px/1.8 "Microsoft Yahei", tahoma,arial,"Hiragino Sans GB", helvetica, sans-serif; }
img { border:0;}
.wraper { height:2000px; text-align:center; margin:0 auto; padding-top:20px; width:960px; background-color:#F7F7F7; font-size:22px; color:#FF0000; }
.gotop { position:fixed; right:50%; bottom:20px; margin-right:-580px; }
.gotop-btn { display:block; width:62px; height:52px; background:url(images/gotop.png) no-repeat 0 0; text-indent:-9999px; }
.gotop-btn:hover { background-position:0 -54px; }
</style>
<script type="text/JavaScript" name="jquery" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div class="wraper">鼠标往下滚动然后注意右下角，有惊喜！</div>
<div class="gotop"><a href="javascript：document.body.scrollTop=0;document.documentElement.scrollTop=0;void(0);" class="gotop-btn" title="回到顶部" style="display:none; ">回到顶部</a></div>
<script type="text/javascript">$(window).scroll(function(){$(this).scrollTop()>200?$(".gotop-btn").CSS("display","block"):$(".gotop-btn").hide()})</script>
</body>
</html>
其中的
<script type="text/javascript">$(window).scroll(function(){$(this).scrollTop()>400?$(".gotop-btn").css("display","block"):$(".gotop-btn").hide()})</script>
是实现返回顶部的核心代码，其中的红色数字“400”代表当前内容距离页面顶部的高度，可以自由修改成你需要的高度。
