layui topbar图标(即返回顶部)未显示的解决方…

2019-02-17 01:49:06来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

  在自己搭建纯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>

  


原文链接:https://www.cnblogs.com/EmptyBlog/p/10380594.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:jquery绑定点击事件的三种写法

下一篇:js中的栈、堆、队列、内存空间