layui topbar图标（即返回顶部）未显示的解决方法
在自己搭建纯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图标（即返回顶部）未显示的解决方法的更多相关文章
- zepto的返回顶部scrollTop的动画解决方法
写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...
- [转]Win10输入法图标消失且只能输入英文的解决方法
今天电脑开机后发现输入法图标不见了,而且只能输入英文,上网查了很多资料终于找到了解决方案,现摘录如下,以防再次遇到问题,便于查找.谢谢提供解决方案的大牛,如有侵权,请联系本人进行删除(文末放置了原文地 ...
- dedecms织梦系统后台验证码图片不显示的解决方法
网站迁移后,dedecms织梦系统后台验证码图片不显示的解决方法通用解决方案-取消后台验证码功能因为没有验证码,不能进后台,所以修改php文件源代码:方法一:打开dede/login.php 找到如下 ...
- python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法？
python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法: 原因:因为jenkins是用windows installer 安装成 windo ...
- DEDE后台登录和前台验证码不显示的解决方法
DEDE后台登录和前台验证码不显示的解决方法,网络上现在有好几种方法,某些时候还是有用的.说说自己今天遇到的一个情况,跟其他不一样的原因和解决方法: 方法一 1.用ftp把网站根目录下的DATA文件 ...
- make:cc 命令未找到的解决方法
安装redis时遇到的问题 make:cc 命令未找到的解决方法 没安装gcc,然后安装 yum install gcc yum install gcc-c++
- ueditor的工具栏显示乱码解决方法 小问题.. 是你的页面编码与语言包js编码不符所导致的
ueditor的工具栏显示乱码解决方法 小问题.. 是你的页面编码与语言包js编码不符所导致的解决方法:用记事本将ueditor\..\lang\zh-cn\zh-cn.js打开,然后保存为ANSI ...
- JMeter 查看结果树监听器响应数据中文显示乱码解决方法
查看结果树监听器响应数据中文显示乱码解决方法 by:授客 QQ:1033553122 问题描述 使用监听器-查看结果树(View Results Tree Listener)过程中发现,响应数据面 ...
- WORD 的 Open 和Workbook 的 LoadFromFile 函数返回null的一种解决方法
WORD Application.Documents.Open 和 Workbook workbookExcel.LoadFromFile 函数返回null的一种解决方法 DCOM Config Se ...
随机推荐
- 算法与数据结构(三) 二叉树的遍历及其线索化(Swift版)
前面两篇博客介绍了线性表的顺序存储与链式存储以及对应的操作,并且还聊了栈与队列的相关内容.本篇博客我们就继续聊数据结构的相关东西,并且所涉及的相关Demo依然使用面向对象语言Swift来表示.本篇博客 ...
- mantisbt的配置与安装
下载并安装wampserver; 安装时,提示SMTP服务器时,应正确填写邮箱的SMTP的服务器地址: 安装完成后,登录phpMyAdmin; 给原有的root用户创建密码,所有root用户: 创建一 ...
- Node.js 种子下载器
Node.js 种子下载器 庆祝 2018 国庆,制作了一个 Node.js 的种子下载器.爬取页面,根据页面的链接,破解另外一个网站,下载种子文件.项目比较简单,爬取页面没有使用任何爬虫框架.项目源 ...
- HBase之行信息简析
这一节我们简单介绍一下HBase的行信息.文章前半部分会对照源码介绍,后面会有我自己画的图,大家如果对这些信息已经比较了解了,跳过源码对照部分看后面的图,加深一下印象. 下面简单分析一下HBase中对 ...
- mysql如何卸载完全
如何彻底的删除MySQL数据库: 以下操作以Window7操作系统为例: 1)停止window的MySQL服务. 找到“控制面板”-> “管理工具”-> “服务”,停止MySQL后台服务. ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
- Http协议状态码总结
一.http方法 方法名 说明 get 发送一个获取请求,服务器的响应会包含head与body部分 post 发送一个输入数据的请求,服务器的响应会包含head与body部分 head 服务器响应的只 ...
- 利用Grafana展示zabbix数据
一.系统搭建(以Centos7为例)因为我们的主要目的是展示zabbix的数据,所以建议大家直接在zabbix的服务器上搭建这个系统,亲测两系统无冲突,这样部署的好处是两系统间的数据传输更快,前端展示 ...
- redis 系列9 对象类型(字符串，哈希，列表，集合，有序集合)与数据结构关系
一.概述 在前面章节中,主要了解了 Redis用到的主要数据结构,包括:简单动态字符串.链表(双端链表).字典.跳跃表. 整数集合.压缩列表(后面再了解).Redis没有直接使用这些数据结构来实现键值 ...
- SpringCloud Config服务端
1.导入依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId> ...