<!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>
<title>点击平滑滚动“返回顶部”的效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{padding:0;margin:0;}
html{text-overflow:ellipsis;}
body{background:#eee;}
ul,li{list-style:none;}
#wrap{width:1002px;margin:0 auto;position:relative;background:#ddd;}
#scrolltop{display:none;position:fixed;bottom:10px;left:50%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));margin-left:501px;width:16px;border-radius:3px;font-size:14px;text-align:center;color:#080;cursor:pointer;padding:1px;background:#fff;}
#arrow{width:16px;height:12px;font-size:16px;font-weight:bold;overflow:hidden;}
#backwords{font-size:13px;padding-top:4px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
//判断滚动条距离上面的高度是否为0来判断是否显示返回头部模块
$(window).scroll(function(){
var top=$(window).scrollTop();
if(top>300){
$("#scrolltop").fadeIn("slow");
}else{
$("#scrolltop").fadeOut("slow");
}
});
//点击返回头部效果
$("#scrolltop").click(function(){
$("html,body").animate({ scrollTop:0});
});
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="wrap">
<div id="scrolltop">
<div id="arrow">▲</div>
<div id="backwords">返回顶部</div>
</div>
<div style="height:2000px;">预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。</div>
</div>
</body>
</html>
