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

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！