//回顶部
<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" /></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);
});
});