回到顶部效果

html代码

<a href="javascript:;" class="btn_bottom_top sprite js_btn_top">
    <span class="icon_txt">返回顶部</span>
</a>
<a href="javascript:;" class="btn_bottom_feedback sprite js_btn_feedback">
    <span class="icon_txt">意见反馈</span>
</a>
<a href="javascript:;" class="btn_bottom_player js_openplayer">
    <span class="icon_txt">播放器</span>
</a>

css代码

.btn_bottom_top,
.btn_bottom_feedback,
.btn_bottom_player {
    position: fixed;
    right: 40px;
    width: 50px;
    height: 50px;
    background-image: url(/images/icon_sprite.png);
}
.btn_bottom_top {
    display: none;
    bottom: 142px;
    background-position: 0 -120px;
}
.btn_bottom_feedback {
    bottom: 91px;
    background-position: -100px -120px;
}
.btn_bottom_player {
    bottom: 40px;
    background-position: -150px -280px;     
}   
.btn_bottom_feedback:hover,
.btn_bottom_player:hover {
    background: #31c27c;
    color: #fff;
}
.btn_bottom_feedback:hover .icon_txt {
    line-height: 16px;
    padding: 9px;
}
.btn_bottom_player:hover .icon_txt {
    line-height: 50px;
}
.btn_bottom_feedback:hover .icon_txt,
.btn_bottom_player:hover .icon_txt {
    display: block;
    font-size: 12px;
    text-align: center;
}

js代码

var clientHeight = document.documentElement.clientHeight;
var timer = null;
var isTop = true;

//滚动条滚动
$(window).scroll(function () {
    //获取距顶部的距离
    var top = document.documentElement.scrollTop || document.body.scrollTop;

    if (top >= clientHeight) {
        $('.js_btn_top').show();
    } else {
        $('.js_btn_top').hide();
    }

    if (!isTop) {
        clearInterval(timer);
    }

    isTop = false;
});

$('.js_btn_top').click(function () {
    clearInterval(timer);

    timer = setInterval(function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        var ispeed = Math.ceil(top/6);   

        document.documentElement.scrollTop = document.body.scrollTop = top - ispeed;

        isTop = true;
        if(top == 0){
            clearInterval(timer);
        }
    }, 30);
});