?

我們這個的布局很簡單，只需要一張圖片和一個按鈕。

我們將圖片放在一個類名為div1的div里面，我們給這個div一些樣式：width:1200px; margin:0 auto;

我們再在div外面放一個button按鈕，我們給這個按鈕寫一下樣式：width: 40px; height: 40px; right:35px; bottom:20px; display:none; background-image: url('../../Content/images/top_bg.png'); background-position: 0px -40px; border:none; position:fixed;我們給這個button按鈕的背景放一張圖片，讓這張圖片只顯示一半，并將按鈕固定，再當我們的鼠標移動到上面時將顯示的一半隱藏，再將隱藏的一半顯示。

我們寫完了簡單的布局就開始寫jQuery部分。

我們先引入jQuery插件，然后再聲明兩個全局變量，scroll，time，將true賦值給變量scroll，而time先不給他賦值。

我們再寫一個滾動條事件window.οnscrοll=function () {}，然后再聲明一個變量top，將滾動條距離上面的距離賦值給他var top = document.documentElement.scrollTop || document.body.scrollTop;

再聲明一個變量height，將元素返回的可見高度賦值給他var height = document.documentElement.clientHeight; clientHeight：返回元素的可見高度。

用if語句來判斷變量top是否大于變量height的值，如果大于就給button按鈕設置樣式為顯示，否則將其隱藏。

再用一個if語句判斷一下變量scroll是否為false，如果是就將下面用到的定時器清除clearInterval(time);

最后再讓變量scroll的值賦值為false。

我們再給button按鈕綁定點擊事件，將定時器賦值給變量time，我們用的是無限定時器，它里面有兩個參數，一個是匿名函數，另一個是時間，我們先寫第一個參數，里面我們聲明一個變量top，和上面一樣這個變量是獲取滾動條垂直上方的距離的，然后我們用if語句判斷一下變量top是否為0，如果是就清除這個定時器，并且返回，如果不是就來執行下面的代碼。

聲明一個變量speed，我們將計算后的結果賦值給他，Math.floor(-top / 6);，這句代碼表示將變量 top取負數再除于六，然后用Math對象里面的floor方法將其向下取整。

我們設置匹配元素相對滾動條頂部的偏移，將變量top與變量speed的和賦值給他，最后再將變量scroll的值賦值為true。

第二個參數我們設置為100毫秒，這表示每個100毫秒調用一下這個函數。

效果如下：

?

?

?

??

總結

以上是生活随笔為你收集整理的使用jQuery回到顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。