简洁扁平化在线客服，带返回顶部按钮

    简洁大方的扁平化布局在线客服，鼠标移动到QQ图标上，即可显示在线聊天QQ按钮，鼠标移动到phone按钮，可显示联系电话。滚动条下拉，会在右下角显示返回顶部按钮。兼容IE6。

1、在head区域引入相关js和css代码：

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<style>
li{ list-style:none}
#rightButton{ position:fixed; _position:absolute; top:208px; right:0; z-index:999999; display:block;}
#right_ul{ position:relative;}
#right_qq{  background:url(images/7_03.png) no-repeat; width:68px; height:74px; }
#right_tel{ background:url(images/7_05.png) no-repeat; width:68px; height:77px; }
#right_tip{  background:url(images/flag_right.png) no-repeat; width:252px; height:91px; position:absolute; right:70px; top:-10px; display:none; z-index:999999; }
.flagShow_p1{ float:left; margin-left:15px; _margin-left:5px; font-size:18px; line-height:91px;}
.flagShow_p2{ float:left; margin-left:10px; _margin-left:5px; font-size:18px;  color:#FA7C00;}
.flagShow_p2 a{ display:block; margin: 20px 0 5px 12px; line-height:0;}
.flagShow_p2 span{ margin: 0 0 0 14px; }
.flag_qq{ display:none;}
#backToTop{ position:fixed; _position:absolute; bottom:50px; right:0; z-index:999999; display:none; }
a.backToTop_a{  background:url(images/7_08.png) no-repeat; width:68px; height:79px; display:block; }
a.backToTop_a:active{  background:url(images/7_11.png) no-repeat; }
.line91{ line-height:91px; }
</style>

2、在body区域引入下面的代码：

<div id="rightButton">
    <ul id="right_ul">
        <li id="right_qq" class="right_ico" show="qq" hide="tel"></li>
        <li id="right_tel" class="right_ico" show="tel" hide="qq"></li>
        <li id="right_tip" class="png">
        <p class="flagShow_p1 flag_tel">咨询电话</p>
        <p class="flagShow_p2 flag_tel line91">400-800-8000</p>
        <p class="flagShow_p1 flag_qq">咨询QQ</p>
        <p class="flagShow_p2 flag_qq">
        <a href="http://wpa.qq.com/msgrd?v=3&uin=80000000&site=qq&menu=yes" target="_blank">
        <img border="0" src="images/qiyeQQ.png"></a> <span>80000000</span> </p>
        </li>
    </ul>
</div>
<div id="backToTop">
    <a href="javascript:;" onfocus="this.blur();" class="backToTop_a png"></a>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#rightButton").css("right", "0px");
    
    var button_toggle = true;
    $(".right_ico").live("mouseover", function(){
        var tip_top;
        var show= $(this).attr('show');
        var hide= $(this).attr('hide');
        tip_top = show == 'tel' ?  65 :  -10;
        button_toggle = false;
        $("#right_tip").css("top" , tip_top).show().find(".flag_"+show).show();
        $(".flag_"+hide).hide();
        
    }).live("mouseout", function(){
        button_toggle = true;
        hideRightTip();
    });
    
    
    $("#right_tip").live("mouseover", function(){
        button_toggle = false;
        $(this).show();
    }).live("mouseout", function(){
        button_toggle = true;
        hideRightTip();
    });
    
    function hideRightTip(){
        setTimeout(function(){        
            if( button_toggle ) $("#right_tip").hide();
        }, 500);
    }
    
    $("#backToTop").live("click", function(){
        var _this = $(this);
        $('html,body').animate({ scrollTop: 0 }, 500 ,function(){
            _this.hide();
        });
    });

    $(window).scroll(function(){
        var htmlTop = $(document).scrollTop();
        if( htmlTop > 0){
            $("#backToTop").show();    
        }else{
            $("#backToTop").hide();
        }
    });
});
</script>
<!--[if lte IE 6]>
<script src="js/PNG.js" type="text/javascript"></script>
<script>
        if( typeof(PNG) == 'object') PNG.fix('.png');
    </script>
<![endif]-->

注：下面代码是为了PNG在IE6下正常显示。如果没有兼容IE6的需求，可以删除(关于IE6 PNG透明，请点击：使用iepngfix.htc解决IE6下PNG的透明问题或者使用DD_belatedPNG让IE6支持PNG透明图片或者完美解决令人头痛的ie6的png透明问题):

<!--[if lte IE 6]>
<script src="js/PNG.js" type="text/javascript"></script>
<script>
        if( typeof(PNG) == 'object') PNG.fix('.png');
    </script>
<![endif]-->

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！