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

jQuery返回頂部（查看示例）

一、HTML（基本結構）

返回頂部


 

有了上面的html后，當我們點擊”返回頂部”這個鏈接時，就會自動跳轉到body標簽的位置，也就是頁面的頂部。

二、CSS（樣式化）

之所以在上面html代碼的< a>標簽中添加一個空的< span>標簽，目的是為了創建我們預想的返回頂部鏈接樣式，如下圖：

接下來我們需要使用position ： fixed;屬性將跳轉鏈接固定到頁面上，這樣它就可以隨時停留在視線范圍內。以下是全部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屬性給跳轉鏈接中的文字添加漸變效果*/
      -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屬性給標簽背景顏色添加漸變效果*/
      -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（動態效果）

使用jQuery要實現的效果是：當頁面初次載入，瀏覽器滾動條處于最頂部的時候，跳轉鏈接處于隱藏狀態。當滾動條向下滾動后，跳轉鏈接逐漸顯出，當點擊跳轉鏈接后，頁面逐漸滾動至頂部，跳轉鏈接逐漸消失。以下是jQuery代碼：