直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
/*全部-回到顶部*/
#clan-slider{position:fixed;_position:absolute;bottom:30%;right:.1%;z-index:1000;}
#clan-slider ul{margin:0;padding:0;margin-top:-2px;list-style:none;}
#clan-slider ul li{display:block;margin:0;padding:0;margin-top:2px;position:relative;}
#clan-slider ul li a{display:block;overflow:hidden;width:48px;height:48px;border:1px solid #0ba1e4;background-color:#f5f5f5;background-image:url(http://www.bootfastui.cn/img/2021/0905-3/clan-slider.png);background-repeat:no-repeat;}
#slider-chat{background-position:0 -92px;}
#slider-chat:hover{background-position:-46px -92px;background-color:#0ba1e4;}
#slider-qq{background-position:0 -138px;}
#slider-qq:hover{background-position:-46px -138px;background-color:#0ba1e4;}
#slider-phone{background-position:0 -184px;}
#slider-phone:hover{background-position:-46px -184px;background-color:#0ba1e4;}
#slider-wechat{background-position:0 -230px;}
#slider-wechat:hover{background-position:-46px -230px;background-color:#0ba1e4;}
#slider-goTop{background-position:0 0;}
#slider-goTop:hover{background-position:-46px 0;background-color:#0ba1e4;}
#clan-slider #slider-menu{background-position:0 -46px;background-color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.7);}
#clan-slider #slider-menu:hover{background-position:-46px -46px;}
#clan-slider .clan-slider-tips{position:absolute;top:0px;right:48px;display:none;height:48px;padding-left:10px;padding-right:2px;white-space:nowrap;border:1px solid #0ba1e4;background-color:#0ba1e4;text-align:center;line-height:48px;font-size:18px;color:#fff;}
#clan-slider .clan-slider-tips-wechat{display:none;position:absolute;background-color:#0ba1e4;padding:1px;bottom:0;right:50px;}
#clan-slider .clan-slider-tips-wechat img{width:196px;height:196px;}
/*全部-回到顶部*/

</style>

HTML+JS代码

 
<!-- 返回顶部滑块 -->
<section id="clan-slider">
  <ul>
      <li class="hidden-xs">
          <a id="slider-chat" class="web-chat" href="javascript:;"></a>
          <div class="clan-slider-tips">
              在线咨询
          </div>
      </li>
      <li class="hidden-xs">
          <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=54350970&site=qq&menu=yes" id="slider-qq"></a>
          <div class="clan-slider-tips">
              QQ咨询
          </div>
      </li>
      <li class="hidden-xs">
          <a id="slider-phone" href="javascript:void(0);"></a>
          <div class="clan-slider-tips">
              18810888729
          </div>
      </li>
      <li class="hidden-xs">
          <a id="slider-wechat" href="javascript:void(0);"></a>
          <div class="clan-slider-tips-wechat">
              <img src="/Public/images/erweima.png">
          </div>
      </li>
      <li><a id="slider-goTop" href="javascript:void(0);"></a></li>
      <!--
      <li class="visible-xs-block">
          <a id="slider-menu" href="javascript:void(0);"></a>
      </li>
      -->
  </ul>
</section>
<script>
  $(function(){
  

     //当点击跳转链接后，回到页面顶部位置
     $("#slider-goTop").click(function(){
        $('body,html').animate({scrollTop:0},500);
        return false;
    });
    //返回顶部等滑块hover事件
    $('#slider-chat,#slider-qq,#slider-phone,#slider-wechat').hover(
        function(){
            $(this).next().show();
        },
        function(){
            $(this).next().hide();
        }
    );
 
});
</script>