操作方法

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

（02）緊跟著 <body> 標籤後面，加入一行程式碼：<a name="top"></a>這是一個錨鏈接，用於標記位置；這裡我們是回到頂部，所以錨鏈接的位置緊跟在 <body> 標籤後面；如果要跳到頁面其他位置，就把這個錨鏈接放在對應的位置；

（03）然後在 </body> 標籤前加入回到頂部按鈕，程式碼如下：<a href="#top">回到頂部</a>這是跳轉到錨鏈接的程式碼，href屬性的值為#加上錨鏈接的name屬性 top儲存檔案，在瀏覽器中開啟，把頁面滾動到底部，點選回到頂部就看到效果了。

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

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