jQuery右侧悬浮固定在线客服返回顶部

一款带鼠标悬停特效的右侧边栏在线客服，悬浮固定在右侧指定位置，同时会根据一定的高度出现返回顶部的按钮，整体美观实用易上手。

分类：悬浮层/弹出层 > 客服难易：入门级

查看演示下载资源下载积分： 30 积分

开头引入CSS样式和jquery库（可自行更换高一点的版本），CSS样式里的字体和图片的路径可以参考一下：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

每一个按钮其实都是一个div元素的组合嵌套，部分代码如下：

<div class="cndns-right-meau meau-sev">
    <a href="javascript:" class="cndns-right-btn">
        <span class="demo-icon">&#xe901;</span>
        <p>在线<br/>客服</p>
    </a>
    <div class="cndns-right-box">
        <div class="box-border">
            <div class="sev-t">
                <span class="demo-icon">&#xe901;</span>
                <p>在线客服<i>服务时间：9:00-24:00</i></p>
                <div class="clear"></div>
            </div>
            <div class="sev-b">
                <h4>选择下列产品马上在线沟通：</h4>
                <ul id="zixunUl">
                    <li><a href="javascript:void(0);">域名/主机</a></li>
                    
                    <li><a href="javascript:void(0);">建站/网店</a></li>
                    <li><a href="javascript:void(0);">企业邮局</a></li>
                    <li><a href="javascript:void(0);">代理咨询</a></li>
                    <li><a href="javascript:void(0);">网站推广</a></li>
                    <li><a href="javascript:void(0);">橙云主机</a></li>
                    
                    <li><a href="javascript:void(0);">域名交易</a></li>
                    
                    <li><a href="javascript:void(0);">租用托管(BGP)</a></li>
                    
                    <li><a href="javascript:void(0);">其他产品</a></li>
                    <div class="clear"></div>
                </ul>
            </div>
            <span class="arrow-right"></span>
        </div>
    </div>
</div>

底部写好检测鼠标滚动和点击返回顶部的事件，代码如下：

//置顶图标显示
$('#top-back').hide()
$(window).scroll(function(){
	 if($(this).scrollTop() > 350){
		$("#top-back").fadeIn();
	 }
	 else{
		$("#top-back").fadeOut();
	 }
  })	
//置顶事件
function topBack(){
  $('body,html').animate({scrollTop:0},300);
}