在木蚂蚁（http://www.mumayi.com/）页面的右下角有个小火箭，点击之后，可以回到页面的顶部，而且还有火箭的动态的效果。
于是将木蚂蚁的页面另存为下来，研究是怎么用js和css实现的。自己将页面中的其他元素删除掉，只留下最简洁的demo页面。
Demo的目录结构是：
Index.html的代码是：
<!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">
<link rel="stylesheet" type="text/css" href="./css/mybody.css" media="all" />
<script language="javascript" type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
</head>
<body>
<div id="scrollTop">
<div class="level-2"></div>
<div class="level-3"></div>
</div>
<script src="./js/script.js"></script>
<script type="text/javascript">
UI.global_search();
var uvOptions = {};
// !important
(function() {
initScrollTop();
})();
</script>
</body>
</html>
实现这个小火箭的功能需要用到一个css样式，和两个js文件还有一张图片。
这个demo支持IE8、chrome、firefox三大主流浏览器。
Demo的下载的地址：（ps：下载无需积分）
http://download.csdn.net/detail/xcxinghai/5579727
原创文章，转载请注明： 转载自成长的企鹅
本文链接地址： 小火箭回到顶部
关于我：成长的企鹅简介