讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui如何实现页面返回顶部(BackTop)功能

陌晨君_3768

陌晨君_3768

发布时间:2026-07-11 09:25:19

|

874人浏览过

|

来源于php中文网

原创

最省事的是用util.fixbar,但需确认滚动容器是window;若实际滚动的是.layui-body,则必须显式指定click行为并设置scrollTop目标为.layui-body,且避免样式冲突与重复插入。

用 util.fixbar 最省事,但必须确认滚动容器

直接调 util.fixbar({ top: true }) 就能出右下角按钮,layui 内置逻辑会自动监听 window 滚动并显示/隐藏。但前提是页面滚动目标是 window ——多数 layui 管理后台实际滚动的是 .layui-body,不是整个窗口。

常见失效现象:util.fixbar 按钮点了没反应,或滚动一段后才出现。原因基本是 CSS 把 .layui-body 设成了局部滚动容器(比如 overflow-y: auto),而 fixbar 默认只操作 window。

  • 检查 computed style:用浏览器开发者工具看 .layui-body 的 overflow-y 是否为 auto 或 scroll
  • 若确实是 .layui-body 在滚动,必须显式指定点击行为:click: function(type) { $('.layui-body').scrollTop(0); }
  • 别在 css 配置里写 !important,比如 bgcolor: '#009688 !important',这会导致样式解析失败,按钮不显示

done 回调里手动插入按钮,适合表格分页栏内加“回顶”

表格分页栏(.layui-laypage)是动态生成的,不能靠初始化配置塞按钮。必须等它挂载完成,再用 done 回调 + setTimeout 插入。

关键点不是“怎么加”,而是“加到哪、滚谁”:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 定位父容器用 document.querySelector('.layui-table-page .layui-laypage'),确保只插进分页栏,不污染其他区域
  • 按钮点击时执行 document.querySelector('.layui-body').scrollTop = 0,不是 document.documentElement.scrollTop ——后者对 Layui 布局无效
  • 必须加存在性判断:if (!layui.$('.layui-btn-top').length),否则搜索重载、翻页都会重复追加按钮
  • 事件绑定必须用事件委托:layui.$(document).on('click', '.layui-btn-top', ...),否则新生成的分页 DOM 上的按钮没响应

表格分页切换后自动回到顶部,别在 page 事件里写 scrollTo

table.on('page(test)', ...) 触发太早,此时新数据还没渲染进 DOM,window.scrollTo(0, 0) 执行了也白执行。

正确时机只有一个:done 回调,且需加 setTimeout 确保 DOM 重绘完成:

  • 整页滚动:在 done 里写 setTimeout(() => window.scrollTo(0, 0), 0)
  • 局部滚动(表格带 height 参数):改用 document.querySelector('.layui-table-box').scrollTop = 0
  • 避免用 behavior: 'smooth',旧版 Layui 不兼容,且和分页动画打架,卡顿明显
  • 如果同时要“跳回第一页 + 回顶”,别堆在同一个 done 里——table.reload({ page: { curr: 1 } }) 自带重载逻辑,回顶动作应放在它的 done 里单独处理

自己写按钮时,scrollTop 失效往往不是 JS 写错了

手写按钮最常卡在“点了没反应”,90% 是滚动目标搞错。Layui 的滚动容器不是固定的,取决于你是否用了 util.fixbar、是否设置了 height、CSS 是否覆盖了 overflow。

  • 先查真实滚动宿主:getComputedStyle(document.querySelector('.layui-body')).overflowY,结果是 auto 就说明它是滚动容器
  • 别用 $('html, body').animate({ scrollTop: 0 }),jQuery 的 animate 在 Layui 环境里常被 CSS transform 或 position: fixed 头部干扰,直接赋值 scrollTop 更稳
  • 按钮显示逻辑(如滚动超过 100px 显示)要用 $(window).scrollTop() 判断,但点击动作的目标仍是 .layui-body,二者不能混用
  • 如果用了 util.fixbar 又手动插按钮,两个按钮会冲突,建议二选一,别共存
滚动容器不统一,是 Layui BackTop 最容易被忽略的复杂点。不同页面、不同布局、甚至同一页面不同 tab 下,滚动宿主都可能变化,硬编码 scrollTop 目标几乎必然出问题。

热门AI工具

更多
AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2403

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5163

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6230

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5798

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

823

2024.05.22

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

20

2026.10.10

Kratos框架HTTP与gRPC服务开发教程
Kratos框架HTTP与gRPC服务开发教程

本专题围绕Kratos框架双协议服务开发,涵盖HTTP路由与处理器编写、参数获取、gRPC服务实现与客户端调用、metadata上下文传递、encoding编解码注册、统一响应封装、超时控制与流式响应实现方法。

20

2026.10.10

Kratos框架Protobuf接口定义与代码生成合集
Kratos框架Protobuf接口定义与代码生成合集

本专题讲解Kratos框架接口定义体系,涵盖proto编写规范、proto add/client/server生成命令、http注解路由、validate校验、OpenAPI文档生成、跨服务proto复用与兼容性设计。

0

2026.10.10

C++虚函数怎么定义和调用
C++虚函数怎么定义和调用

C++虚函数是实现运行时多态的重要机制。本专题从virtual关键字的基本用法入手,介绍基类与派生类之间的函数重写、基类指针调用派生类方法,以及动态绑定的执行过程,帮助初学者掌握虚函数的核心语法。

20

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.8万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn