返回顶部特效 click(), scroll();

html

css

.backTop {
    cursor: pointer;
    position: fixed;
    right: 50px;
    top: -900px;
    z-index: 6;
    width: 70px;
    height: 900px;
    background: url(img/backTop.png);
}

jq

 function cat() {
        var backTop = $('.backTop');
        $(window).scroll(function () {
            // 获取滚动条位置
            var scrollBar = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            // 如果滚动条大于680的时候 猫往下滑动，其他情况就隐藏
            if (scrollBar >= 680){
                backTop.stop().animate({top: '-270px'});
            }else {
                backTop.stop().animate({top: '-900px'});
            }
        });
        // 点击 返回顶部
        backTop.click(function () {
            $('body,html').animate({scrollTop: 0}, 2000);
        });
    }
    cat();

img

backTop.png

最终效果