layui topbar图标（即返回顶部）未显示的解决方法
程序员文章站
2024-01-02 09:56:28
在自己搭建纯html模板的时候，遇到了topbar无法显示的问题，搜了社区都没啥有用的解决方法，于是引用了util.js的源文件，发现用dom变量未获取到正确的scrollTop值，经过反复测试，把这两处dom替换成$('.layui-body')即可解决。位置如下图： 接着又出现了另一个问题，那就 ......
在自己搭建纯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">
empty
</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、将菜单三角图标改成tab响应式中的非闭合三角图标及动画效果，并且缓慢展开和收缩子菜单的动画效果</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>
<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>
<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>
<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 class="layui-tab-item">2、非模块化使用样式丢失未解决</div>
<div class="layui-tab-item">3、iframe使用？</div>
<div class="layui-tab-item">4、iframe使用？</div>
<div class="layui-tab-item">5、iframe使用？</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© emptygao
</div>
</div>
</body>