支持返回网页顶部的在线客服特效

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div style="height:1200px;"></div>

<div class="box_os">

<div class="os_x"></div>

    <div class="osqq">

    <em>(工作日：9:30-18:30)</em>

    <strong>在线QQ</strong>

        <a target="_blank" href="#"><p id="ico_onlineqq" class="qq"></a>

        <strong>客服电话</strong><span>00000000000</span><span>00000000000</span>

        <strong>会员卡代理</strong><span>000000000-0000</span>

        <strong>微博</strong><span><a href="#" target="_blank">微博账户名</a></span>

    </div>

    <div class="acbox">

    <a class="ico_pp" onclick="FeedbackUtil.feed('#');" href="#"></a>

        <a class="ico_gt" href="#" target="_self"></a>

    </div>

</div>

<div class="onlineService">

<p class="ico_os">

    <a class="ico_pp" onclick="FeedbackUtil.feed('#');" href="#"></a>

    <a class="ico_gt" href="#" target="_self"></a>

</div>

4、书写css代码。

* { margin: 0; padding: 0; list-style: none; }

img { border: 0; }

body { text-align: left; font: 12px/1.5em \5B8B\4F53, Arial, Helvetica, sans-serif; color: #333; background: #F7F7F7; }

.box_os .os_x, .box_os .osqq, .ico_os, .ico_gt, .ico_pp, .osqq .qq { background: url(../images/kf.gif) no-repeat; }

.box_os { height: auto; overflow: hidden; width: 131px; position: fixed; right: 0; top: 44px; _position: absolute; z-index: 9999; display: none; }

.box_os .os_x { background-color: #f7f7f7; background-position: 2px 2px; width: 18px; height: 20px; float: right; display: inline; cursor: pointer; }

.box_os .osqq { width: 129px; border: 1px solid #D1D1D1; background-color: #fff; background-position: 0 -120px; clear: both; padding: 37px 0 8px 0; text-align: center; }

.box_os .osqq p { height: auto; line-height: 20px; width: 129px; margin-top: 8px; }

.box_os .osqq p strong { color: #666; }

.box_os .osqq img { padding: 7px 0 3px 0; }

.box_os .osqq p em { color: #999; display: block; }

.box_os .osqq p span { color: #547816; display: block; }

.box_os .osqq .qq { background-position: -140px -120px; display: block; width: 99px; height: 26px; margin: 0 auto; margin-top: 8px; cursor: pointer; }

.acbox { width: 130px; overflow: hidden; }

.acbox .ico_gt { background-position: -60px 0; border: 1px solid #299ec0; border-top: 0; cursor: pointer; width: 60px; height: 33px; float: right; }

.acbox .ico_pp { background-position: -60px -60px; border: 1px solid #81b140; border-top: 0; cursor: pointer; width: 60px; height: 33px; float: right; margin: 0 2px; }

.onlineService { background: none; display: none; width: 39px; *width:84px;

height: 178px; ; position: fixed; right: 0; top: 44px; _position: absolute; }

.onlineService .ico_os { background-position: -2px -20px; border: 1px solid #c7c7c7; cursor: pointer; width: 39px; height: 98px; float: right; }

.onlineService .ico_gt { background-position: right 0; border: 1px solid #299ec0; cursor: pointer; width: 39px; height: 37px; float: right; clear: both; }

.onlineService .ico_pp { background-position: right -60px; border: 1px solid #81b140; cursor: pointer; width: 39px; height: 37px; float: right; margin: 0 0 1px 0; clear: both; }

.box_os .osqq p span a { color: #557917; }

5、书写并添加js代码。

$(function(){

var _userAgent = window.navigator.userAgent.toLowerCase();

if(_userAgent.indexOf('android')<0 && _userAgent.indexOf('iphone')<0 &&  _userAgent.indexOf('ipad')<0 )

{ 

if($.cookie("onlineSP")==null||$.cookie("onlineSP")=="0"||$.cookie("onlineSP")=="")

{

$('.onlineService').show();

$('.box_os').hide();

}

else if($.cookie("onlineSP")=="1")

{

$('.onlineService').hide();

$('.box_os').show();

}

}

else{

$('.onlineService').show();

$('.box_os').show();

}

$('.onlineService .ico_os').click(function()

{

$('.onlineService').hide();

$('.box_os').show();

$.cookie("onlineSP","0",{expires:1,path:"/",domain:"lanrenzhijia.com"});

});

$('.os_x').click(function()

{

$('.box_os').hide();

$('.onlineService').show();

$.cookie("onlineSP","1",{expires:2100000000,path:"/",domain:"lanrenzhijia.com"});

});

$boxOsFun = function(){var st=$(document).scrollTop();if (!window.XMLHttpRequest) {$('.box_os').css('top',st+44);$('.onlineService').css('top',st+44);}};

$(window).bind('scroll', $boxOsFun);

$boxOsFun();

var feedback_url ='http://www.lanrenzhijia.com';

$('.acbox .ico_pp').hover(function(){

$(this).stop().animate({height:'52px'},'fast');

},function(){

$(this).stop().animate({height:'33px'},'fast');

}

);

$('.acbox .ico_gt').hover(function(){

$(this).stop().animate({height:'52px'},'fast');

},function(){

$(this).stop().animate({height:'33px'},'fast');

}

);

$('.onlineService .ico_pp').hover(function(){

$(this).stop().animate({width:'87px'},'fast');

},function(){

$(this).stop().animate({width:'39px'},'fast');

}

);

$('.onlineService .ico_gt').hover(function(){

$(this).stop().animate({width:'97px'},'fast');

},function(){

$(this).stop().animate({width:'39px'},'fast');

}

);

$('.ico_gt').click(function(){

$("html, body").animate({scrollTop:0}, 1);

})

//分辨率

if ( $(window).width()<1200 || screen.width<1200) 

    { 

    $('.hydp950,.w_950,.sdmain,.main').css('overflow','hidden');

$('.top_bg').css({'overflow':'hidden','width':'950px','margin':'0 auto'});

$('.db_bg2').addClass('db_bg2_s');

$('.jstd_c .bg_l,.jstd_c .bg_r').css('display','none');

$('#js_play .prev').css('left','0');

$('#js_play .next').css('right','0');

$('#videoplay .prev, #videoplay2 .prev').addClass('prev_s');

$('#videoplay .next, #videoplay2 .next').addClass('next_s');

    }else{

    $('.hydp950,.w_950,.sdmain,.main').removeAttr('style');

$('.top_bg').removeAttr('style');

$('.db_bg2').removeClass('db_bg2_s');

$('.jstd_c .bg_l,.jstd_c .bg_r').removeAttr('style');

$('#js_play .prev').removeAttr('style');

$('#js_play .next').removeAttr('style');

$('#videoplay .prev, #videoplay2 .prev').removeClass('prev_s');

$('#videoplay .next, #videoplay2 .next').removeClass('next_s');

    }

});

6、代码整体结构。

7、查看效果。