酷知百科網

位置:首頁 > 遊戲數碼 > 互聯網

在網頁中插入回到頂部按鈕 回到頂部代碼

互聯網2.36W

爲了方便客戶在瀏覽頁面較長的網頁時,能一鍵回到頂部,我們可以在網頁中加入
回到頂部按鈕。

操作方法

(01)開啟Dreamweaver,新建文檔,把標題修改爲“回到頂部”;首先需要製造一個超出屏幕長度的網頁,在 <body> 和 </body> 標籤中插入以下代碼:<div style="width:100%; height:1500px;"></div>儲存檔案,在瀏覽器中開啟,就可以看到瀏覽器右側出現滾動條,如圖:

在網頁中插入回到頂部按鈕 回到頂部代碼
在網頁中插入回到頂部按鈕 回到頂部代碼 第2張

(02)緊跟着 <body> 標籤後面,加入一行代碼:<a name="top"></a>這是一個錨連結,用於標記位置;這裏我們是回到頂部,所以錨連結的位置緊跟在 <body> 標籤後面;如果要跳到頁面其他位置,就把這個錨連結放在對應的位置;

在網頁中插入回到頂部按鈕 回到頂部代碼 第3張

(03)然後在 </body> 標籤前加入回到頂部按鈕,代碼如下:<a href="#top">回到頂部</a>這是跳轉到錨連結的代碼,href屬性的值爲#加上錨連結的name屬性 top儲存檔案,在瀏覽器中開啟,把頁面滾動到底部,點擊回到頂部就看到效果了。

在網頁中插入回到頂部按鈕 回到頂部代碼 第4張

(04)美化一:我們可以透過修改CSS,來讓“回到頂部”的按鈕更美觀,代碼如下:<a href="#top" style="display:block; width:35px; height:42px; border:1px solid #000; position:fixed; right:20px; bottom:20px;">回到<br/>頂部</a>效果如下圖:如果想要效果更好,可以用圖片代替文字連結。

在網頁中插入回到頂部按鈕 回到頂部代碼 第5張

(05)美化二:我們還可以給回到頂部按鈕增加一個動畫效果,讓它看起來不那麼突然。在 </body> 標籤前加入代碼:<script type="text/javascript" src=""></script><script type="text/javascript" src=""></script><script type="text/javascript">$(function(){$("a")thScroll();})</script>這裏用到兩個 js 檔案,請從附件中下載。儲存檔案,在瀏覽器中開啟,點擊回到頂部按鈕,就會發現滾動條是慢慢滾動到頂部的。