修改过的一个简单的返回顶部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