在自己搭建纯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. [Swift]LeetCode243.最短单词距离 $ Shortest Word Distance

    Given a list of words and two words word1 and word2, return the shortest distance between these two ...

  2. Lunix服务器上项目迁移命令

    scp就是security copy,用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下. scp传输数据用的是SSH协议,保证了数据传输的安全,其格式如下: scp 远程用户名@IP ...

  3. mockjs，json-server一起搭建前端通用的数据模拟框架

    无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的.本篇文章就是基于此原因而产出的.希望对有这方面的需求的同 ...

  4. Vuex的模块化、优点

    前言:如果说我们的vuex的仓库代码量巨大,我们要不要采用就像后端与一样的分层,要不然一吨的代码放在main里,呵呵.所以我们要采用模块化! 看这篇文章的时候,一定要看看上一篇的vuex入门精讲:Vu ...

  5. Nginx 优化静态文件访问

    简介 Web 开发中需要的静态文件有:CSS.JS.字体.图片,可以通过web框架进行访问,但是效率不是最优的. Nginx 对于处理静态文件的效率要远高于 Web 框架,因为可以使用 gzip 压缩 ...

  6. ELK-logstash案例实战之读取日志输出到elasticsearch

    简介:从日志文件中读取日志,输出到elasticsearch集群中 $ cd /home/es/logstash-/config $ vim test3_es.conf $ cd /home/es/l ...

  7. 【bug】----- Git上传文件错误导致本地代码丢失

    1.问题描述:通过Git上传本地文件,在git commit操作后本地未上传的代码全部丢失... 2.解决: 第一步:在项目目录下打开Git Bash: 第二步:输入 git reflog 第三步:在 ...

  8. [十二]JavaIO之BufferedInputStream BufferedOutputStream

    功能简介 BufferedInputStream 和 BufferedOutputStream一样,他们都是过滤流 装饰器模式下具体的装饰类 用来装饰InputStream以及OutputStream ...

  9. Jenkins结合.net平台综合之完整示例项目

    前面每一个部分我们都是介绍的单个功能,这里介绍一个完整项目,本文中所用到的命令都放在了github示例代码仓库中 https://github.com/mrtylerzhou/netdevops 命令 ...

  10. Python迭代和解析(4)：自定义迭代器

    解析.迭代和生成系列文章:https://www.cnblogs.com/f-ck-need-u/p/9832640.html 本文介绍如何自定义迭代器,涉及到类的运算符重载,包括__getitem_ ...