效果如下：

按鈕的html和css代碼如下。

<div id="gotop">
    <i class="fa fa-chevron-up"></i>
</div>

i標簽<i class="fa fa-chevron-up"></i>使用了Font Awesome，400多個圖標（包括QQ、微信、微博）只要30KB，可無限放大，不需要js，非常的??。

按鈕gotop用fixed定位到屏幕右下角，並且隱藏。

#gotop {
    position: fixed;
    right: 10px;
    bottom: 12%
 
;
    z-index: 666;
    display: none;
    width: 40px;
    height: 40px;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #21759b;
    border-radius: 2px;
    cursor: pointer;
}
#gotop:hover {
    background-color: #195a84;
}

JQ代碼如下，上半部分檢測滾動條位置顯示和隱藏gotop按鈕，下半部分點擊按鈕後圓滑的回到頂部。

 1 $(function () {

 2   // 保存gotop按鈕
 3   var gotop = $("#gotop");
 4   // 檢測滾動條位置，高於600回頂部按鈕顯示
 5   $(window).scroll(function () {
 6     console.log($(window).scrollTop());
 7     if ($(window).scrollTop() > 600) {
 8         gotop.fadeIn(1000);
 9     }
10     else {
11       gotop.fadeOut(1000);
12     }
 
13   });

14   // gotop按鈕點擊，圓滑回到頂部 scrollTop: 0表示到滾動條的0，800(ms)表示用時。
15   gotop.click(function () {
16     $(‘body,html‘).animate({ scrollTop: 0 }, 800);18   });

19 });

沒有特效的按鈕可以看我的博客右下角，博客園申請JS權限失敗了??。

JQuery實現淡入淡出的回到頂部按鈕