JavaScript實現網頁回到頂部效果

在瀏覽網頁時，當我們瀏覽到網頁底部，想要立刻回到網頁頂部時，這時候一般網頁會提供一個回到頂部的按鈕來提升用戶體驗，以下代碼實現了該功能

HTML代碼：

<p id="back-top" style="display:block;">
            <a href="#top">
                <span>返回頂部</span>
            </a>
        </p>

CSS代碼：

/* 返回頂部 開始 */
        #back-top {
            position: fixed; /*相對於瀏覽器窗口進行絕對定位*/
            bottom: 10px;
            right: 15px;
            z-index: 99;
        }

            #back-top span {
                width: 50px;
                height: 64px;
                display: block; /*將元素顯示為塊級元素*/
            }

            #back-top a {
                outline: none; /*突出元素*/
            }
        /* 返回頂部 結束 */

JavaScript代碼：

$(function () {
            // 隱藏 #back-top
            $("#back-top").hide();
            // 滾動窗口時觸發
            $(window).scroll(function () {
                //滾動條的垂直偏移大於500時
                if ($(this).scrollTop() > 500) {
                    //淡入顯示
                    $('#back-top').fadeIn();
                } else {
                    //淡入隱藏
                    $('#back-top').fadeOut();
                }
            });
            // 單擊按鈕滾動到頂部
            $('#back-top a').click(function () {
                //自定義動畫
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
})

 End！