相关:《即插即用 返回顶部 javascript》
之前发布的即插即用返回顶部jQuery,今天再次分享一个案例,是一个集返回顶部、意见反馈、二维码弹出的代码。今天分享的案例也更符合zblog模板。
<div class="bottom_tools"> <div class="qr_tool">二维码</div> <a id="feedback" href="#" title="意见反馈">意见反馈</a> <a id="scrollUp" href="javascript:;" title="飞回顶部"></a> <div class="qr_img"><img src="images/ewm.jpg" width="150" height="150" /></div> </div>
$(function(){ var $bottomTools = $('.bottom_tools'); var $qrTools = $('.qr_tool'); var qrImg = $('.qr_img'); $(window).scroll(function () { var scrollHeight = $(document).height(); var scrollTop = $(window).scrollTop(); var $windowHeight = $(window).innerHeight(); scrollTop > 50 ? $("#scrollUp").fadeIn(200).css("display","block") : $("#scrollUp").fadeOut(200); $bottomTools.css("bottom", scrollHeight - scrollTop > $windowHeight ? 40 : $windowHeight + scrollTop + 40 - scrollHeight); }); $('#scrollUp').click(function (e) { e.preventDefault(); $('html,body').animate({ scrollTop:0}); }); $qrTools.hover(function () { qrImg.fadeIn(); }, function(){ qrImg.fadeOut(); }); });
.bottom_tools{position:fixed;z-index:1070;right:40px;bottom:40px;} .bottom_tools>*{font:0/0 a;display:block;margin-top:5px;color:transparent;border:0;background-color:transparent;text-shadow:none} .qr_img{position:absolute;top:-189px;left:-183px;display:none; width:173px; height:234px; background:url(images/qr_img.png) no-repeat;} .qr_img img{ width:150px; margin:0 auto; display:block; margin-top:30px;} #scrollUp{width:45px;height:45px;background-image:url(images/backgrounds.32.png);background-position:-54px -53px;display:none;} #scrollUp:hover{background-image:url(images/backgrounds.32.png);background-position:-100px -53px} #feedback{width:45px;height:45px;background-image:url(images/backgrounds.32.png);background-position:-102px 0} #feedback:hover{background-image:url(images/backgrounds.32.png);background-position:-146px -46px} .qr_tool{width:45px;height:45px;background-image:url(images/backgrounds.32.png);background-position:-148px 0;cursor:pointer;} .qr_tool:hover {width: 45px;height: 45px;background-image: url(images/backgrounds.32.png);background-position: -192px -46px;}
返回顶部中需要的背景图片: