修改过的一个简单的返回顶部JS代码

代码是从一个带着返回顶部加客服显示里弄出来修改来用的，然后把多余的去掉了，就留了返回顶部，图片和样式做了修改，喜欢简洁风。

使用的样式

/*返回顶部*/
.izl-rmenu{position:fixed;right:50px;top:70%; z-index:999; }
.izl-rmenu .btn{width:50px; height:50px; margin-bottom:1px; cursor:pointer; position:relative;}
.izl-rmenu .btn-top{background:url(www.zhangxingju.com/返回顶部图片路径.png) 0 0 no-repeat; background-color:#666666; display:none;}
.izl-rmenu .btn-top:hover{background-color:#444;}
.closekf{color: #777777;cursor:pointer; position:relative;left: 23px;bottom: 5px}

html代码 在页面代码底部使用就行 注意ID和JS里要用一样的

<div id="retop"></div>

实现的JS代码 记得引入jq 我用的版本是1.11.2

 $(function(){
         var tophtml="<div id=\"izl_rmenu\" class=\"izl-rmenu\"><div class=\"btn btn-top\"></div></div>";
        $("#retop").html(tophtml);
        $("#izl_rmenu").each(function(){
            $(this).find(".btn-top").click(function(){
                $("html, body").animate({
                    "scroll-top":0
                },"fast");
            });
        });
        var lastRmenuStatus=false;
        $(window).scroll(function(){//bug
            var _top=$(window).scrollTop();
            if(_top>200){
                $("#izl_rmenu").data("expanded",true);
            }else{
                $("#izl_rmenu").data("expanded",false);
            }
            if($("#izl_rmenu").data("expanded")!=lastRmenuStatus) {
                lastRmenuStatus = $("#izl_rmenu").data("expanded");
                if (lastRmenuStatus) {
                    $("#izl_rmenu .btn-top").slideDown();
                } else {
                    $("#izl_rmenu .btn-top").slideUp();
                }
            }
        });
});

返回顶部用到的图片链接: http://pan.baidu.com/s/1o8vkbIa 密码: 4u13