弹性抽屉式jQuery在线客服

        鼠标移动到按钮上去会像抽屉一样弹性展开和收起的始终悬浮于右侧的在线客服jQuery代码，基于jQuery2.0以上版本。带客服中心按钮、客户案例按钮、新浪微博按钮和返回顶部按钮等功能。点击返回顶部按钮，自动返回顶部。
1、引入相关css和jquery：

<link href="css/5imoban.net.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jQuery-2.1.1.min.js"></script>

2、书写相关HTML代码：

<div class="side">
	<ul>
		<li><a href="http://www.5imoban.net/" title="我爱模板网" target="_blank"><div class="sidebox"><img src="images/side_icon01.png">客服中心</div></a></li>
		<li><a href="http://www.5imoban.net/" title="我爱模板网" target="_blank"><div class="sidebox"><img src="images/side_icon02.png">客户案例</div></a></li>
		<li><a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" target="_blank"><div class="sidebox"><img src="images/side_icon04.png">QQ客服</div></a></li>
		<li><a href="###" target="_blank"><div class="sidebox"><img src="images/side_icon03.png">新浪微博</div></a></li>
		<li style="border:none;"><a href="javascript:;" class="sidetop"><img src="images/side_icon05.png"></a></li>
	</ul>
</div>

3、书写jQuery代码：

$(document).ready(function(){
	$(".side ul li").hover(function(){
		$(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})	
	},function(){
		$(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"})	
	});
	$(".sidetop").click(function(){
		$('html,body').animate({'scrollTop':0},600);
	})
});