天天看點

使用jQuery實作傳回頂部功能

很多網站上都有傳回頂部的效果,本文闡述如何使用jquery實作傳回頂部按鈕。

首先需要在頂部添加如下html元素:

其中a标簽指向錨點top,可以在頂部防止一個<code>&lt;a name="top"&gt;&lt;/a&gt;</code>的錨點,這樣在浏覽器不支援js時也可以實作傳回頂部的效果了。

要想讓傳回頂部的圖檔顯示在右側,還需要一些css樣式,如下:

  

上面樣式中的背景圖檔是雪碧圖,下面提供兩個單獨的傳回頂部圖檔友善朋友們使用:

使用jQuery實作傳回頂部功能
使用jQuery實作傳回頂部功能
使用jQuery實作傳回頂部功能
使用jQuery實作傳回頂部功能
使用jQuery實作傳回頂部功能

有了html和樣式,我們還需要用js控制傳回頂部按鈕,在頁面滾動時漸隐漸現傳回頂部按鈕。

這樣就可以了。

注意在載入頁面後需要向下拖動一點滾動條才可以看到傳回頂部的效果圖。

繼續閱讀