带返回顶部和二维码的在线客服js代码

    我爱模板网分享一款简约的带返回顶部、二维码、QQ和百度商家口碑按钮的在线客服js代码，当滚动条滚动超过100px时，就会出现返回顶部按钮，点击回到顶部，同时返回顶部按钮消失。二维码您可以替换成您自己的二维码，在images目录里。点击QQ，则弹出QQ聊天框。点击口碑，则跳转到口碑网。 1、下载解压，将文件放到项目目录

2、引入相关css和jQuery库

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

注意：此css文件有重置样式，可能会覆盖您的样式，可酌情删减。

3、返回顶部代码

$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>100){
            $("#side-bar .gotop").fadeIn();    
        }
        else{
            $("#side-bar .gotop").hide();
        }
    });
    $("#side-bar .gotop").click(function(){
        $('html,body').animate({'scrollTop':0},500);
    });
});

4、html代码：

<ul id="side-bar" class="side-pannel side-bar">
    <a href="javascript:;" class="gotop" style="display:none;"><s class="g-icon-top"></s></a>
    <a href="http://wpa.qq.com/msgrd?v=3&uin=543031222&site=qq&menu=yes" target="_blank" class="text"><s class="g-icon-qq1"></s><span>QQ</span></a>
    <a href="http://weibo.com/u/hxz1412350" target="_blank" class="text weibo"><s class="g-icon-weibo1"></s><span>二维码</span></a>
    <a href="javascript:;" class="qr"><s class="g-icon-qr1"></s><i></i></a>
    <a href="http://koubei.baidu.com/s/5imoban.net" class="text survey" target="_blank"><s class="g-icon-survey1"></s><span>口碑</span></a>
</ul>