悬浮二维码 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);

    });

});