带返回顶部功能的jQuery在线客服特效

使用方法：

引入CSS样式文件

<link href="css/css.css" rel="stylesheet" type="text/css" />

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

插件初始化、参数配置

$(function(){
	$('#close_im').bind('click',function(){
		$('#main-im').css("height","0");
		$('#im_main').hide();
		$('#open_im').show();
	});
	$('#open_im').bind('click',function(e){
		$('#main-im').css("height","272");
		$('#im_main').show();
		$(this).hide();
	});
	$('.go-top').bind('click',function(){
		$(window).scrollTop(0);
	});
	$(".weixing-container").bind('mouseenter',function(){
		$('.weixing-show').show();
	})
	$(".weixing-container").bind('mouseleave',function(){        
		$('.weixing-show').hide();
	});
});

HTML结构

<div class="main-im">
  <div id="open_im" class="open-im"></div>  
  <div class="im_main" id="im_main">
    <div id="close_im" class="close-im"><a href="javascript:void(0);" title="点击关闭"></a></div>
    <a href="http://shang.qq.com/wpa/qunwpa?idkey=dc47456140e5565440fe64d9b5b07f56ab054b8dac5bee3da5fb6c23469545ec" class="im-qq qq-a" title="在线QQ客服">
    <div class="qq-container"></div>
    <div class="qq-hover-c"><img class="img-qq" src="images/qq.png"></div>
    <span> QQ在线咨询</span> </a>
    <div class="im-tel">
      <div>免费咨询热线</div>
      <div class="tel-num">400-888-8888</div>
    </div>
    <div class="im-footer" style="position:relative">
      <div class="weixing-container">
        <div class="weixing-show">
           <div class="weixing-txt">获得更多惊喜</div>
          <img class="weixing-ma" src="images/weixin_code.jpg">
          <div class="weixing-sanjiao"></div>
          <div class="weixing-sanjiao-big"></div>
        </div>
      </div>
      <div class="go-top"><a href="javascript:;" title="返回顶部"></a> </div>
	 <div style="clear:both"></div>
    </div>
  </div>
</div>