在木螞蟻（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
原創文章，轉載請註明： 轉載自成長的企鵝
本文連結地址： 小火箭回到頂部
關於我：成長的企鵝簡介
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
