回到頂部按鈕製做

一、前言

慕課網視頻是用JS寫的，兼容性存在一些差別。因此我想用JQ再從新實現一遍。

二、需求點

1. 「回到頂部」圖標出如今右下角，而且只在頁面第二屏時顯示。
2. 點擊「回到頂部」圖標後，頁面滾動回頂部。
3. 回滾時，速度由快變慢。並在回滾時能夠中斷。

三、具體實現

HTML代碼：

CSS代碼

JS代碼

運行效果：

總結：

1. 京東商場的回到頂部的方法是錨點法，<a href='#'></a>
2. 淘寶商城的回到頂部的方法是滾動，但中途不能中止。
3. 慕課網視頻教學中的bug，當雙擊回到頂部時。就算到了頂部也不會中止。應該是冒泡了。
4. 給A標籤增長自定義屬性rolling-in，做爲控制器，配合return false;防止重複點擊。
5. 優化方向，回滾時進入第一屏後。回到頂部的圖標淡出，就完美了。