回到顶部按钮

本实战来自个人研究，不一定是最好的！

仅支持IE8及以上版本！

HTML:

<!--回到顶部 开始-->
    <div id="to_top" class="to_top">
        <i class="to_top_pic"></i>
    </div>
<!--回到顶部 结束-->

CSS:

/*回到顶部按钮，切忌初始化不要用float、position(absolute,relative,fixed)等脱离文档的定位*/
#to_top {
    width: 50px;
    height: 50px;
    margin: 500px 0 0 1020px;
    background: #efefef;
    /*position: fixed;*/
    /*top: 0;*/
}

JS:

/**
     * 回到顶部
     * */
    var toTopDistance = 700;

    //侦听滚动事件
    $(window).on('scroll', function () {
        //console.log($(document).scrollTop());
        //console.log(toTopDistance);

        /**
         * 滚到一定程度，回到顶部按钮一直显示在右上方*/
        if($(document).scrollTop() >= toTopDistance) {

            $('#to_top').css({
                'position': 'fixed',
                'top': 0,
                'margin': '0 0 0 1020px'
            });

        }else {
            $('#to_top').css({
                'position': 'static',
                'margin': '500px 0 0 1020px'
            });
        }
    });