悬浮二维码 QQ ToTop

//回顶部

<div id="lqdbe" style="position: absolute; visibility: visible; z-index: 1; display: none;">

<a href='#goTop'>

<img src="/JCZC/images/tzdb.gif" />

</a>

</div>

页面元素：

//悬浮二维码

<!-- 悬浮 二维码

<div class="suspension">

<ul>

<li>

<div id="gototop" class="suspenbox">

<span>返回顶部</span>

</div>

</li>

<li>

<div id="online_advice" class="suspenbox">

<span>在线咨询</span>

<div class="onlineQQ" id="D_qq" runat="server">

</div>

</div>

</li>

<li>

<div id="QRcode" class="suspenbox">

<span>扫二维码</span>

<div class="QRcodebig"><img src="/images/qrcode_app_download_link.jpg" alt=""/></div>

</div>

</li>

</ul>

</div>

Css样式 ：

/* 新增侧边浮动快捷框样式 sta */

.suspension { position: fixed; right:10px; bottom:90px; z-index: 9999;}

.suspension li { width: 39px; height: 39px; }

.suspenbox {width:38px; height: 38px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #d2d2d2; cursor: pointer;}

.suspenbox span { display:block; width: 24px; height: 26px; background: #f2f2f2; padding:6px 7px; color:#999; display: none; }

#gototop { background:#fff url(../images/back_top.png) no-repeat 0 0; display: none; }

#online_advice {  background:#fff url(../images/back_top.png) no-repeat 0 -38px; position:relative;}

.onlineQQ { width:180px; height:40px; right:39px; bottom:-1px; position: absolute; display: none; }

.qqonlinebox { float: right; width: 38px; height: 38px; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #d2d2d2;  background:#fff url(../images/back_top.png) no-repeat 0 -114px; }

#QRcode {  background:#fff url(../images/back_top.png) no-repeat 0 -76px; position:relative; }

.QRcodebig { width: 124px; height: 124px; position: absolute; bottom:-1px; right: 39px; border:1px solid #d2d2d2; display: none; }

.QRcodebig img  { width: 100%; height: 100%; }

/* 新增侧边浮动快捷框样式 end */

JS 文件：

$(function () {

/*悬浮快捷框*/

$(".suspenbox").hover(function () {

$(this).children("span").css('display', 'block');

}, function () {

$(this).children("span").css('display', 'none');

});

$("#online_advice").hover(function () {

$(this).children('.onlineQQ').slideDown(200);

}, function () {

$(this).children('.onlineQQ').slideUp(200);

});

$("#QRcode").hover(function () {

$(this).children('.QRcodebig').show(200);

}, function () {

$(this).children('.QRcodebig').hide(200);

});

$(window).on('scroll', function () {

var st = $(document).scrollTop();

if (st > 200) {

$('#gototop').fadeIn(200);

} else {

$('#gototop').fadeOut(200);

}

});

$('#gototop').bind('click', function () {

$('html,body').animate({ 'scrollTop': 0 }, 500);

});

});