小火箭回到頂部

在木螞蟻http://www.mumayi.com/）頁面的右下角有個小火箭，點擊之後，可以回到頁面的頂部，而且還有火箭的動態效果。

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1550232T0-0.png" real_src="http://www.bkjia.com/uploads/allimg/131228/1550232T0-0.png" width="450" height="276" original="http://www.bkjia.com/uploads/allimg/131228/1550232T0-0.png" name="image_operate_61781377867368401" title="小火箭回到頂部" action-data="http%3A%2F%2Fwww.xinghaixu.com%2Fwp-content%2Fuploads%2F2013%2F06%2F20130619001942.png" action-type="show-slide" style="margin:0px;padding:0px;border:0px;list-style:none;background-color:transparent;" />

於是將木螞蟻的頁面另存新檔下來，研究是怎麼用js和css實現的。自己將頁面中的其他元素刪除掉，只留下最簡潔的demo頁面。

Demo的目結構是：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1550232346-2.png" real_src="http://www.bkjia.com/uploads/allimg/131228/1550232346-2.png" width="579" height="170" original="http://www.bkjia.com/uploads/allimg/131228/1550232346-2.png" name="image_operate_7191377867471299" title="小火箭回到頂部" style="margin:0px;padding:0px;border:0px;list-style:none;background-color:transparent;" />

index.html的代碼是：

請點擊小火箭回到頂部

實現這個小火箭的功能需要用到一個css樣式，和兩個js檔案還有一張圖片。

這個demo支援IE8、chrome、firefox三大主流瀏覽器。

示範地址

650) this.width=650;" alt="weixin" width="200" height="200" original="http://www.bkjia.com/uploads/allimg/131228/1550235338-4.jpg" src="http://www.bkjia.com/uploads/allimg/131228/1550235338-4.jpg" style="margin:0px;padding:0px;border:0px;font-size:13.333333969116211px;background-color:transparent;display:inline;background-position:initial initial;background-repeat:initial initial;" />

原創文章，轉載請註明： 轉載自成長的企鵝

本文連結地址：小火箭回到頂部

關於我：成長的企鵝簡介