右下角点击页面回顶部组件

web开发中经常有页面回顶的需求，近期使用，代码通俗易懂，而且还很实用！

html:

<a id="goTop" class="go-top" href="#header">

    <span class="go-top-inner"></span>

</a>

css：

.go-top {

    background: url("../img/xxx.png") no-repeat scroll left top transparent;

    bottom: 65px;

    color: #444444;

    display: none;

    height: 50px;

    margin-left: 510px;

    position: fixed;

    right: 160px;

    text-align: center;

    width: 50px;

}

.go-top:hover {

    background-position: -50px top;

}

js：（基于jquery）

<!-- 页面回顶 -->

var gotop = $('#goTop');

gotop.click(function() {　　

    $("html,body").animate({ scrollTop: 0 }, 200);　　

    return false;

});

$(window).scroll(function() {

    if (gotop.offset().top > window.innerHeight) {　　

        gotop.show();

    }　　　

    else {　　

        gotop.hide();

    }　　

});

图片