欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-02 09:56:28
在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这两处dom替换成$('.layui-body')即可解决。位置如下图: 接着又出现了另一个问题,那就 ......

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

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

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

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

  顺便附上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">
                        empty
                    </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、将菜单三角图标改成tab响应式中的非闭合三角图标及动画效果,并且缓慢展开和收缩子菜单的动画效果</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>
                            <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>
                            <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>
                            <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 class="layui-tab-item">2、非模块化使用样式丢失未解决</div>
                    <div class="layui-tab-item">3、iframe使用?</div>
                    <div class="layui-tab-item">4、iframe使用?</div>
                    <div class="layui-tab-item">5、iframe使用?</div>
                </div>
            </div>
        </div>

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

  

上一篇:

下一篇: