HTML網頁返回頂部怎麼做

我們瀏覽網頁的時候，可以看到頁面的底部會有一個“返回頂部”的圖標按鈕，點擊它就回返回頂部，那麼怎樣實現返回頂部的效果呢？

操作方法

（01）如圖，先進行網頁佈局，一個content的div用來存放內容，一個fixed的div用來設置返回頂部圖標。

（02）然後設置content的寬度高度，這裏只是舉個例子，我們只要把高度設置得超出瀏覽器窗口高度就可以了。

（03）然後設置fixed的寬高，這裏也是隨意的，然後我們把它定位在瀏覽器的右下角。

（04）如圖所示，這樣我們的“返回頂部”圖標就大致完成了。

（05）然後在頁面中引入jQuery插件，插件版本不做要求，這裏我就引入了3.2.1的版本。

（06）然後我們在jQuery入口函數裏面書寫代碼，如圖，先要獲取到fixed所在的div。獲取方法是$(“d”)。

（07）然後給獲取到的d元素綁定一個click方法。

（08）在click方法裏面書寫匿名函數，然後我們就可以在匿名函數裏面設置返回頂部的動畫效果了。

（09）如圖，返回頂部是相對整個HTML文檔來説的，所以我們要獲取到HTML和body元素。

（10）然後給它們設置動畫效果，如圖，使用animate方法，這個方法時jQuery插件裏面的。

（11）然後在animate裏面設置參數，第一個參數就是scrollTop的屬性，我把它設置為0，這樣，滾動條就會回到頂部，第二個參數是時間，表示回到頂部所需要的時間，具體時間可以自己設置。