Layui topBar图标（即返回顶部）未显示的解决方法

　　在自己搭建纯html模板的时候，遇到了topBar无法显示的问题，搜了社区都没啥有用的解决方法，于是引用了util.js的源文件，发现用dom变量未获取到正确的scrollTop值，经过反复测试，把这两处dom替换成$('.layui-body')即可解决。位置如下图：

　　

　　接着又出现了另一个问题，那就是返回顶部的功能失效了，看来还是没绑定到事件，于是将下图中的代码也替换掉即可：

　　

　　顺便附上html中body代码：

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">Layui Template</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">测试1</a></li>
                <li class="layui-nav-item"><a href="">测试2</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">测试3</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">测试31</a></dd>
                        <dd><a href="">测试32</a></dd>
                        <dd><a href="">测试33</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="Content/Images/qilongzhu.jpg" class="layui-nav-img">
                        EmptyGao
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">退出</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="leftmenu">
                    <li class="layui-nav-item"><a href="Home.html">首页</a></li>
                    <li class="layui-nav-item">
                        <a class="" href="javascript:;">测试一</a>
                        <dl class="layui-nav-child">
                            <dd><a lay-id="11" href="javascript:;">测试1</a></dd>
                            <dd><a lay-id="12" href="javascript:;">测试2</a></dd>
                            <dd><a lay-id="13" href="javascript:;">测试3</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">测试二</a>
                        <dl class="layui-nav-child">
                            <dd><a lay-id="21" href="javascript:;">测试1</a></dd>
                            <dd><a lay-id="22" href="javascript:;">测试2</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a lay-id="3" href="">测试三</a></li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="layui-tab layui-tab-brief" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <li id="indexPage" class="layui-this">首页</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <ul>
                            <li><blockquote class="layui-elem-quote">引言</blockquote></li>
                            <li>
                                <fieldset class="layui-elem-field">
                                    <legend>待解决问题</legend>
                                    <div class="layui-field-box">
                                        <ul>
                                            <li>1、</li>
                                            <li>2、</li>
                                            <li>3、</li>
                                            <li>4、</li>
                                            <li>5、</li>
                                        </ul>
                                    </div>
                                </fieldset>
                            </li>
                            <li>
                                默认分割线
                                <hr>

                                赤色分割线
                                <hr class="layui-bg-red">

                                橙色分割线
                                <hr class="layui-bg-orange">

                                墨绿分割线
                                <hr class="layui-bg-green">

                                青色分割线
                                <hr class="layui-bg-cyan">

                                蓝色分割线
                                <hr class="layui-bg-blue">

                                黑色分割线
                                <hr class="layui-bg-black">

                                灰色分割线
                                <hr class="layui-bg-gray">
                            </li>
                            <li>
                                默认分割线
                                <hr>

                                赤色分割线
                                <hr class="layui-bg-red">

                                橙色分割线
                                <hr class="layui-bg-orange">

                                墨绿分割线
                                <hr class="layui-bg-green">

                                青色分割线
                                <hr class="layui-bg-cyan">

                                蓝色分割线
                                <hr class="layui-bg-blue">

                                黑色分割线
                                <hr class="layui-bg-black">

                                灰色分割线
                                <hr class="layui-bg-gray">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © EmptyGao
        </div>
    </div>
</body>

　　

posted @ 2019-02-14 20:37  EmptyGao  阅读(2801)  评论(0)  编辑  收藏  举报