在自己搭建纯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. Kubernetes（k8s）1.12.2集群搭建

    本博客搭建k8s集群1.12.2版本 1. 准备2台以上最低2核4G的服务器 2. 关闭机器的防火墙 12 systemctl disable firewalldsystemctl stop fire ...

  2. [Swift]LeetCode8. 字符串转整数 (atoi) | String to Integer (atoi)

    Implement atoi which converts a string to an integer. The function first discards as many whitespace ...

  3. [Swift]LeetCode495. 提莫攻击 | Teemo Attacking

    In LOL world, there is a hero called Teemo and his attacking can make his enemy Ashe be in poisoned ...

  4. 两分钟搞懂UiAutomator、UiAutomator2、Bootstrap的关系

    很多同学经过一段时间的学习之后都明白了Appium的基本原理,但是越学习到后面发现出现的很多陌生名词无法弄清楚其具体作用,今天这篇文章的目的就是为了让大家来弄懂三个高频名词:UiAutomator.U ...

  5. 5.Git基础-撤销操作、标签的使用、Git别名

    1.撤销操作 1.1 修改上一次的提交(commit)--  git commit --amend 有时候我们在提交完成之后才发现有几个文件没有提交,或者发现提交信息填写错了,这时候可以使用 git ...

  6. python之读取配置文件模块configparser（三）高级使用---非标准配置文件解析

    非标准配置文件也是经常使用的,如何使用configparser来解析? 这要从configparser本身解析结构来说,configparser包含section和option,非标准配置文件只有op ...

  7. C# 多线程学习笔记 - 3

    本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...

  8. 『最长等差数列 线性DP』

    最长等差数列(51nod 1055) Description N个不同的正整数,找出由这些数组成的最长的等差数列. 例如:1 3 5 6 8 9 10 12 13 14 等差子数列包括(仅包括两项的不 ...

  9. 使用ML.NET实现情感分析[新手篇]

    在发出<.NET Core玩转机器学习>和<使用ML.NET预测纽约出租车费>两文后,相信读者朋友们即使在不明就里的情况下,也能按照内容顺利跑完代码运行出结果,对使用.NET ...

  10. Mac电脑C语言开发的入门帖

    本文是写给Mac电脑开发新手的入门帖,诸神请退散. C语言 C语言可说是电脑环境中的"镇国神器",从发明至今,虽然C语言的使用者缓慢的减少,但从当前市场应用情况看,尚无一台电脑能够 ...