<div class="container">
    <div class="content"></div>
</div>

.container {
    width:80%;
    margin:0 auto;
    height:auto;
    min-height:100%;
    position:relative;
}
.content {
    padding: 10px;
    margin: 20px;
    border: 2px solid #777777;
}
p#goToTop {
    position:fixed;
    bottom:15px;
    right:15px;
    z-index: 99;
}
p#goToTop a {
    text-align:center;
    text-decoration:none;
    display:block;
    width:36px;
    z-index: 99;
}
p#goToTop a span {
    background: url("http://images.cnblogs.com/cnblogs_com/EasonWu/201944/o_m-gotop.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    display:block;
    height: 96px;
    width: 36px;
}
#goToTop a:hover span {
    background-position: right top;
}

$(function () {
    var topPosition = "<div id='top'></div>"; //定义顶部锚点的标签
    var goToTopButton = "<p id='goToTop'><a href='#top'><span></span></a></p>"; //定义按钮标签
    $("div.container").prepend(topPosition); //在container的div最前面加上锚点标签
    $("div.container").append(goToTopButton); //在container的div最后面加上按钮标签
    $("#goToTop").hide(); //首先将#goToTop隐藏
    //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $("#goToTop").fadeIn(1500);
            } else {
                $("#goToTop").fadeOut(1500);
            }
        }); //当点击跳转链接后，回到页面顶部位置
        $("#goToTop").click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });
});

// 编写一个插件叫做goToTop
jQuery.fn.goToTop = function (settings) {
    settings = jQuery.extend({
        min: 100, //设置距离顶部的最小值为100
        fadeSpeed: 200, //设置一个淡出淡入的速度
        ieOffset: 120 //处理IE的兼容问题
    }, settings);

    return this.each(function () {
        //listen for scroll
        var el = $(this);
        //in case the user forgot
        el.css("display", "none");
        $(window).scroll(function () {
            /* stupid IE < 9 hack
            if (!jQuery.support.hrefNormalized) {//设置这个按钮的css属性
                el.css({
                    "position": "absolute",
                    "top": $(window).scrollTop() + $(window).height() - settings.ieOffset
                });
            } */

            if ($(window).scrollTop() >= settings.min) {
                el.fadeIn(settings.fadeSpeed);
            } else {
                el.fadeOut(settings.fadeSpeed);
            }
        });
    });
};

$(function () {
    var topPosition = "<div id='top'></div>"; //定义顶部锚点的标签
    var goToTopButton = "<p id='goToTop'><a href='#top'><span></span></a></p>"; //定义按钮标签
    $("div.container").prepend(topPosition); //在container的div最前面加上锚点标签
    $("div.container").append(goToTopButton); //在container的div最后面加上按钮标签

    if ($(window).scrollTop() < 1) {
        $("#goToTop").hide(); //滚动条距离顶端的距离小于showDistance是隐藏goToTop按钮
    }

    $("#goToTop").goToTop({
        min: 1,
        fadeSpeed: 1500
    });

    $("#goToTop").click(function (e) {
        //当点击跳转链接后，回到页面顶部位置
        e.preventDefault();
        $("html,body").animate({
            scrollTop: 0
        }, 1000);
    });
});