侧边工具栏

最新推荐文章于 2025-05-01 08:38:22 发布

林罔顾

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量457

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/amazinga/article/details/105096183

版权

<script>
    $(document).ready(function() {
        //首先将#btn隐藏
        $("#rollbar-totop").hide();
        //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
        $(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() > 180) {
                    $("#rollbar-totop").fadeIn(200);
                } else {
                    $("#rollbar-totop").fadeOut(200);
                }
            });
            //当点击跳转链接后，回到页面顶部位置
            $("#rollbar-totop").click(function() {
                $('body,html').animate({
                        scrollTop: 0
                    },
                    500);
                //return false;
            });
        });
    });
</script>
<div class="rollbar rollbar-rb">
    <ul>
        <li class="rollbar-qrcode">
            <a href="javascript:void(0)">
                <i class="fa fa-qrcode"></i>
                <span class="glyphicon glyphicon-qrcode rollbar_returnTop"></span>
            </a>
            <h6>
                "关注微信"
                <img src="https://themebetter.com/qrcode?url=http://demo.themebetter.com/dux" >
                <i></i>
            </h6>
        </li>

        <li class="rollbar-totop" id="rollbar-totop" style="display: list-item;">
            <a  href="javascript:void(0)">

                <span class="glyphicon glyphicon-menu-up rollbar_returnTop" ></span>
            </a>
            <h6>
                回顶部
                <i></i>
            </h6>
        </li>
    </ul>
</div>