实现返回顶部效果2

实现返回顶部效果1：http://www.tnblog.net/aojiancc2/article/details/164

效果如下：

html:

<div class="rollto" style="display: none;">
    <a class="ico ico-totop" style="color: #38A3DB" title="回顶部"></a>
</div>

css:

.rollto {
    position: fixed;
    right: 5px;
    bottom: 51px;
    z-index: 999999;
    width: 32px;
    font-family: simsun;
    /* display: none; */
}

.ico-totop {
    background-position: 0 0;
}

.ico-torespond, .ico-totop {
    display: block;
    margin-top: 2px;
    height: 32px;
    width: 32px;
    opacity: .8;
    filter: alpha(opacity=80);
    cursor: pointer;
}

.ico {
    overflow: hidden;
    line-height: 64px;
    font-size: 0;
    display: inline-block;
}

.comm, .ico {
    /*图片地址，根据你项目的图片位置为准*/
    background-image: url(img/sprite.png);
    background-repeat: no-repeat;
}

js:

//回到顶部
$(".rollto").click(function () {
    $("html,body").animate({ scrollTop: 0 }, 200);
});

$(document).scroll(function () {
    var scroll_top = $(document).scrollTop();
    //高度多少出现返回顶部，可以随意调整
    if (scroll_top > 600) {
        $(".rollto").show();
    } else {
        $(".rollto").hide();
    }
})

最后贴一个需要用到的图，需要的右键保存即可：

资源下载地址：http://www.tnblog.net/resource/aojiancc2/5F89DD26DB134D86B50DD8CA3C53B990