之前寫過關(guān)于創(chuàng)建人性化的返回頂部鏈接的文章，討論了返回頂部鏈接需要具備哪些特點(diǎn)才能稱得上人性化。一直以來我都覺得停留在視覺區(qū)域內(nèi)的返回頂部連接更為完美一些，但由于對javascript不熟悉，所以一直不知道如何在技術(shù)上實(shí)現(xiàn)，只能使用別人做好的javascript代碼。最近一段時(shí)間學(xué)習(xí)了jQuery，發(fā)現(xiàn)其實(shí)用jQuery來寫的話很簡單，所以在這片文章里我會介紹一下如何自己動手創(chuàng)建簡單而且很酷的返回頂部鏈接效果，讓我們開始。

jQuery返回頂部（查看示例）

一、HTML（基本結(jié)構(gòu)）

返回頂部


 

有了上面的html后，當(dāng)我們點(diǎn)擊”返回頂部”這個(gè)鏈接時(shí)，就會自動跳轉(zhuǎn)到body標(biāo)簽的位置，也就是頁面的頂部。

二、CSS（樣式化）

之所以在上面html代碼的< a>標(biāo)簽中添加一個(gè)空的< span>標(biāo)簽，目的是為了創(chuàng)建我們預(yù)想的返回頂部鏈接樣式，如下圖：

接下來我們需要使用position ： fixed;屬性將跳轉(zhuǎn)鏈接固定到頁面上，這樣它就可以隨時(shí)停留在視線范圍內(nèi)。以下是全部CSS代碼：

p#back-to-top{
      position:fixed;
      bottom:100px;
      left:80px;
}
p#back-to-top a{
      text-align:center;
      text-decoration:none;
      color:#d1d1d1;
      display:block;
      width:80px;
      /*使用CSS3中的transition屬性給跳轉(zhuǎn)鏈接中的文字添加漸變效果*/
      -moz-transition:color 1s;
      -webkit-transition:color 1s;
      -o-transition:color 1s;
}
p#back-to-top a:hover{
      color:#979797;
}
p#back-to-top a span{
      background:#d1d1d1 url(images/arrow-up.png) no-repeat center center;
      border-radius:6px;
      display:block;
      height:80px;
      width:80px;
      margin-bottom:5px;
      /*使用CSS3中的transition屬性給標(biāo)簽背景顏色添加漸變效果*/
      -moz-transition:background 1s;
      -webkit-transition:background 1s;
      -o-transition:background 1s;
}
#back-to-top a:hover span{
      background:#979797 url(images/arrow-up.png) no-repeat center center;
}
 

三、jQuery（動態(tài)效果）

使用jQuery要實(shí)現(xiàn)的效果是：當(dāng)頁面初次載入，瀏覽器滾動條處于最頂部的時(shí)候，跳轉(zhuǎn)鏈接處于隱藏狀態(tài)。當(dāng)滾動條向下滾動后，跳轉(zhuǎn)鏈接逐漸顯出，當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，頁面逐漸滾動至頂部，跳轉(zhuǎn)鏈接逐漸消失。以下是jQuery代碼：