简单的jquery固定位置返回顶部效果

我们通常会在网站中加入固定在右侧的返回顶部按钮，这里实现的效果是，有上下2个按钮，上面按钮是某种提示按钮会始终显示，下面按钮是返回顶部的按钮，只在页面向下滚动后显示。 下面是具体步骤：

1、HTML代码：

<div class="fixback">
  <div class="mobile"><img src="imgs/fl_btn_m.png" alt=""/>  </div>
  <div class="backtop" id="backtop"> <a href="javascript:;"><img src="imgs/fl_btn_t.png" alt="返回顶部" /></a> </div>
</div>

2、CSS代码：

.fixback {
    width:40px;
    position:fixed;
    bottom:100px;
    right:0px;
}
.fixback .mobile {
    cursor:pointer;
}
.fixback a {
    outline:0;
}
.fixback .backtop {
    margin-top:2px;
    display:none;
}

3、JS代码：

<script type="text/javascript">
    $(window).scroll(function() {
        var scrolls = $(this).scrollTop();
        if(scrolls > 100){
            $("#backtop").show();
        }else{
            $("#backtop").hide();
        }
    });
    $("#backtop").click(function(){
        $("html, body").animate({
            scrollTop: 0
        }, 250);
    });
</script>

Tips:本方法兼容IE7以上，Firefox，Chrome。