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;
            });
})