在自己搭建纯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. Cookie丢失的原因

    最近在运行项目遇见cookie丢失的问题,这里简单总结了几点 1.Cookie的Domain设置不正确2.Cookie超时3.Cookie中含有一些非法字符,致使浏览器丢弃Cookie4.程序源码可能 ...

  2. 百度地图API 自定义标注图标

    通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...

  3. Python前世今生以及种类、安装环境

    一.Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为A ...

  4. Android OpenGL ES 开发（五）: OpenGL ES 使用投影和相机视图

    OpenGL ES环境允许你以更接近于你眼睛看到的物理对象的方式来显示你绘制的对象.物理查看的模拟是通过对你所绘制的对象的坐标进行数学变换完成的: Projection - 这个变换是基于他们所显示的 ...

  5. FFmpeg 结构体学习(六)： AVCodecContext 分析

    在上文FFmpeg 结构体学习(五): AVCodec 分析我们学习了AVCodec结构体的相关内容.本文,我们将讲述一下AVCodecContext. AVCodecContext是包含变量较多的结 ...

  6. [Swift]LeetCode258. 各位相加 | Add Digits

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  7. [Swift]LeetCode818. 赛车 | Race Car

    Your car starts at position 0 and speed +1 on an infinite number line.  (Your car can go into negati ...

  8. Redis 设计与实现 （八）--排序、慢查询日志、监视器

    一.排序 SORT <key>  对一个数字值的key进行排序 1.alpha 对字符串类型的键进行排序 2.asc / desc redis 默认升序排序asc desc 与之相反 3. ...

  9. 4.Git基础-查看提交历史

    1.查看提交历史 --  git log  使用 git log 可以查看到所有的提交(commit)历史. 1. $ git log 列出所有commit,最新的commit在最上面.会显示每个提交 ...

  10. PyPI可以使用的几个国内源

    参考 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣(dou ...