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，這樣，滾動條就會回到頂部，第二個引數是時間，表示回到頂部所需要的時間，具體時間可以自己設定。