下午在做开发的时候，需要用到一个客服代码，就随手找了一个，用着还不错。

希望大家能够喜欢。

html代码

<!-- kf start -->
<div class="yb_conct">
  <div class="yb_bar">
    <ul>
      <li class="yb_top">返回顶部</li>
      <li class="yb_phone">4008-123-456</li>
      <li class="yb_QQ">
      	<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456&amp;site=qq&amp;menu=yes&amp;from=message&amp;isappinstalled=0" title="即刻发送您的需求">在线咨询</a>
      </li>
      <li class="yb_ercode" style="height:53px;">微信二维码 <br>
        <img class="hd_qr" src="static/images/weixin.jpg" width="125" alt="关注你附近"> </li>
    </ul>
  </div>
</div>

<!-- kf end  -->

css代码

/*固定的悬浮窗*/
.yb_conct{position:fixed;z-index:9999999;top:200px;right:-127px;cursor:pointer;transition:all .3s ease;}
.yb_bar ul li{width:180px;height:53px;font:16px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:3px;border-radius:3px;transition:all .5s ease;overflow:hidden;}
.yb_bar .yb_top{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 0;}
.yb_bar .yb_phone{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -57px;}
.yb_bar .yb_QQ{text-indent:0;background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -113px;}
.yb_bar .yb_ercode{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -169px;}
.hd_qr{padding:0 29px 25px 29px; display: inline; width: 125px;}
.yb_QQ a{display:block;text-indent:54px;width:100%;height:100%;color:#fff;}

$(document).ready(function(){
	// 悬浮窗口
	$(".yb_conct").hover(function() {
		$(".yb_conct").css("right", "5px");
		$(".yb_bar .yb_ercode").css('height', '200px');
	}, function() {
		$(".yb_conct").css("right", "-127px");
		$(".yb_bar .yb_ercode").css('height', '53px');
	});
	// 返回顶部
	$(".yb_top").click(function() {
		$("html,body").animate({
			'scrollTop': '0px'
		}, 300)
	});
});

ok，大家可以自己试试。

效果图如下：

默认样式和展开样式：

over，谢谢大家。