案例：jQuery 返回顶部（返回顶部、微信、评论、反馈）_js/jQuery

资料来源：网络整理时间：2023/3/4 0:56:13 共计：3614 浏览

相关：《即插即用返回顶部 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;}

返回顶部中需要的背景图片：

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：案例：单边阴影CSS写法_CSS学习 | ·下一条：!important 优先级最高_CSS学习