我爱模板网 > 特效插件 > 在线客服 >  带返回顶部和二维码的在线客服js代码正文

带返回顶部和二维码的在线客服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>

部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
下载 提取码/密码:59pw(点击复制密码) 预览
上一篇:dedecms织梦在线客服插件 下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢