在自己搭建纯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. 【同余方程组】POJ1006 生理周期

    同余方程组: 先来看一道题目:有物不知其数,三三数之剩二:五五数之剩三:七七数之剩二.问物几何?  然后我们可以做如下变换,设x为所求的数. x%3=2              x ≡ a1(%m1 ...

  2. 记一次令人窒息的线上fullgc调优

    今天第二篇采坑了... ... 现场因为处理太急促没有保留,而且是一旁协助,没有收集到所有信息实在是有些遗憾...只能靠记忆回想一些细节 情况是一台服务器一启动就开始full gc,短短1分钟可以有几 ...

  3. PyCharm2019 激活码

    因公司的需求,需要做一个爬取最近上映的电影.列车号.航班号.机场.车站等信息,所以需要我做一个爬虫项目,当然java也可以做爬虫,但是还是没有python这样方便,所以也开始学习Python啦!!! ...

  4. 看完Andoird9.0 Pie的隐藏特性，我买了SSL证书

    今年 8 月,Google 正式公布了 Android 9.0 ,新的甜点名称也正式揭晓——Pie.这次的大版本升级中,藏着一个不起眼的特性:默认使用 HTTPS 为了将所有网络流量从明文(未加密的 ...

  5. react-native学习（RN）--之Window环境下搭建环境配置，以及初始化建立react-native项目，（真机和模拟器运行的相关错误解决办法，android打包报错）

    react-native以后会更火的 一.安装java 二.安装Android Studio 三.安装react-native需要的Android studio额外部分 四.安装nodeJS  五.安 ...

  6. tomcat的catalina.out日志按自定义时间日式进行分割

    使用cronolog对tomcat的日志进行自定义日期格式的切割,方便日志的整理和遇到问题日志的排查! 1.安装cronolog工具1.1 下载 cronolog 地址:网上很多下载地址这里就不在累赘 ...

  7. 『离散化 discrete』

    离散化(discrete) 离散化可以说是一个很基础的算法吧,但是有些时候还是很好用很有必要的算法. 离散化的排序的一个运用,具体地讲,离散化算法是将无穷大集合中的若干个元素映射到有限大小的集合中,以 ...

  8. 基于winserver部署Apollo初次体验（附.net客户端demo）

    前言 配置中心伴随着这几年分布式系统演变和微服务架构的兴起,已经成为必不可少的需求之一.试下一下如果哪天公司的所有应用服务,从公司服务器迁移到云服务,成千上万的配置,修改起来是多么耗时费劲的事(我们公 ...

  9. RabbitMQ学习笔记（四） Routing

    新的场景 在我们学习了RabbitMQ的发布与订阅之后,我们很容易就可以完成一个简单的消息群发器. 使用这个消息群发器,所有的消费者程序实例都会接收到相同的消息信息,从而实现广播的效果. 但是这种广播 ...

  10. 版本管理工具Git（三）Gitlab高可用

    高可用模式 企业版 社区版 我们这里说一下成本比较低的主备模式,它主要依赖的是DRBD方式进行数据同步,需要2台ALL IN ONE的GitLab服务器,也就是通过上面安装方式把所有组件都安装在一起的 ...