在網頁中插入回到頂部按鈕 回到頂部代碼
爲了方便客戶在瀏覽頁面較長的網頁時,能一鍵回到頂部,我們可以在網頁中加入
回到頂部按鈕。
操作方法
(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 檔案,請從附件中下載。儲存檔案,在瀏覽器中開啟,點擊回到頂部按鈕,就會發現滾動條是慢慢滾動到頂部的。
-
ps怎麼修改圖片尺寸——ps怎麼調整圖片大小
ps的用處無處不在,比如我現在所編輯的,其圖片就要求大小差不多,所以學會用ps來修改圖片大小很有必要。操作方法(01)開啟ps後選擇檔案——開啟,選中自己要修改的圖片(02)選擇圖像——圖像大小,可以看到當前圖片的大小(03)爲了不使圖片變形,我們應在約束比例那裏打上對勾。這...
-
遊戲工作室需要知道什麼
想開遊戲工作室的同學越來越多了,這裏歸納一下游戲工作室需要懂得知識操作方法(01)電腦配置,是一既簡單又複雜的問題。配置電腦看起來容易,但是執行起來是否相容、性能是否可以完全發揮那就複雜了額。(02)網絡組建,最好學會路由器交換機的使用,否則ip分配的時候很麻煩。...
-
谷歌瀏覽器語言設定,谷歌瀏覽器如何更改語言
谷歌瀏覽器語言怎麼設定,谷歌瀏覽器如何更改語言。雖然在國內,大多數人也都是用中文,但也不有少英語愛好者喜歡用外語,那麼下面我就來說下谷歌瀏覽器語言怎麼設定,谷歌瀏覽器如何更改語言。操作方法(01)首先點擊開啟GoogleChrome瀏覽器。(02)點擊開啟後,進入到我們最爲習...
-
ac900雙頻無線路由器設定方法
登入管理介面:開啟瀏覽器,在瀏覽器的地址欄中輸入:並按下回車(Enter)按鍵——>在彈出的登入對話框中輸入用戶名和密碼(用戶名和密碼默認都是:admin)——>點擊“確定”,即可登入到TL-WDR4900路由器的管理介面。操作方法(01)啓動設定向導:首次登入到TL-WDR4900路由器的管理界...