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

　　

layui topbar图标（即返回顶部）未显示的解决方法的更多相关文章

  1. zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...

  2. [转]Win10输入法图标消失且只能输入英文的解决方法

    今天电脑开机后发现输入法图标不见了,而且只能输入英文,上网查了很多资料终于找到了解决方案,现摘录如下,以防再次遇到问题,便于查找.谢谢提供解决方案的大牛,如有侵权,请联系本人进行删除(文末放置了原文地 ...

  3. dedecms织梦系统后台验证码图片不显示的解决方法

    网站迁移后,dedecms织梦系统后台验证码图片不显示的解决方法通用解决方案-取消后台验证码功能因为没有验证码,不能进后台,所以修改php文件源代码:方法一:打开dede/login.php 找到如下 ...

  4. python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法？

    python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法: 原因:因为jenkins是用windows installer 安装成 windo ...

  5. DEDE后台登录和前台验证码不显示的解决方法

    DEDE后台登录和前台验证码不显示的解决方法,网络上现在有好几种方法,某些时候还是有用的.说说自己今天遇到的一个情况,跟其他不一样的原因和解决方法:  方法一 1.用ftp把网站根目录下的DATA文件 ...

  6. make:cc 命令未找到的解决方法

    安装redis时遇到的问题 make:cc 命令未找到的解决方法 没安装gcc,然后安装 yum install gcc yum install gcc-c++

  7. ueditor的工具栏显示乱码解决方法 小问题.. 是你的页面编码与语言包js编码不符所导致的

    ueditor的工具栏显示乱码解决方法 小问题..  是你的页面编码与语言包js编码不符所导致的解决方法:用记事本将ueditor\..\lang\zh-cn\zh-cn.js打开,然后保存为ANSI ...

  8. JMeter 查看结果树监听器响应数据中文显示乱码解决方法

    查看结果树监听器响应数据中文显示乱码解决方法 by:授客 QQ:1033553122   问题描述 使用监听器-查看结果树(View Results Tree Listener)过程中发现,响应数据面 ...

  9. WORD 的 Open 和Workbook 的 LoadFromFile 函数返回null的一种解决方法

    WORD Application.Documents.Open 和 Workbook workbookExcel.LoadFromFile 函数返回null的一种解决方法 DCOM Config Se ...

随机推荐

  1. monaco editor + vue的配置

    monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货 ...

  2. Vue 学习笔记 — filter

    简书 对将要插入html的对象进行处理 一个简单的Vue示例 基本过滤器用法 带参数的过滤器 全局过滤器 (这张图片有点问题,最后显示的应该是 hello world不是null) 过滤器的简单应用 ...

  3. AIO系列文档（2）----TIO使用

    AIO系列文档(1)----图解ByteBuffer中介绍了ByteBuffer用法,下面通过介绍t-io介绍如何使用: hello world例子简介 本例子演示的是一个典型的TCP长连接应用,代码 ...

  4. [Swift]LeetCode509. 斐波那契数 | Fibonacci Number

    The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, such th ...

  5. Qt创建分割窗口

    1.QT中QSplitter类可以用来灵活分割窗口,从而产生可用的布局,在以后进行界面布局很有用. 2.先看代码,这个分割窗口按顺序添加子窗口: #include "mainwindow.h ...

  6. Python面向对象中的类和对象

    类和对象 目标 类和对象的概念 类和对象的关系 类的设计 01. 类和对象的概念 类 和 对象 是 面向对象编程的 两个 核心概念 1.1 类 类 是对一群具有 相同 特征 或者 行为 的事物的一个统 ...

  7. 一串数字中，只有一个数字出现一次，其他数字都出现两次，查找出这个数字（python）（原创）

    背景: 电话面试&手撕代码 2019.03.22 Mufasa 问题: 一串数字中,只有一个数字出现一次,其他数字都出现两次,查找出这个数字 条件: 这串数字是有序数 解决方法: 核心代码只有 ...

  8. scala的reduce

    spark 中的 reduce 非常的好用,reduce 可以对 dataframe 中的元素进行计算.拼接等等.例如生成了一个 dataframe : //配置spark def getSparkS ...

  9. npm私有仓库 配置verdaccio在docker环境

    前端开发过程中,少不了自己封装一些通用的包,但又不想放在公共的平台,所以搭建一个npm私有的仓库是很有必要的. 在这里简单介绍如何使用 verdoccio 在docker环境下的配置.verdocci ...

  10. Unix程序员的Win10二三事

    macOS延续自BSD Unix, Linux则是从内核开始重新编写但延续Unix使用方式的Unix.所以mac还有linux程序员,一般都算是*nix程序员,尽管其中还有不少的区别. Windows ...