应使用 table 的 done 回调配合 setTimeout 滚动至顶部,因 page 事件触发过早、DOM 未重绘;局部滚动需操作容器 scrollTop 或 scrollIntoView,避免直接 window.scrollTo。
分页后滚动条没回顶,是因为 Layui 没自动触发页面滚动
layui 的 table.render() 在分页切换时只刷新表格内容,不干预页面滚动位置。用户点击第 5 页后还卡在屏幕中间,不是 bug,是设计如此——它默认假设你可能想继续看当前视口附近的行。
常见错误现象:table.on('page(test)', ...) 回调里没手动滚屏;或用了 window.scrollTo(0, 0) 但执行时机太早(DOM 还没重绘完)。
- 必须在表格重绘完成后再滚动,推荐用
setTimeout(..., 0)或监听done回调 - 别在
page事件里直接scrollTo,此时新数据可能还没渲染进 DOM - 如果表格容器是局部滚动(比如
height: 400px的.layui-table-box),要滚动的是容器,不是window
用 table 的 done 回调 + setTimeout 滚动最稳
done 是表格渲染完毕的钩子,比 page 事件更可靠。加上 setTimeout 能确保浏览器完成 DOM 更新和样式计算。
实操建议:
- 在
table.render()配置中加done: function(res, curr, count) { setTimeout(() => { window.scrollTo(0, 0); }, 0); } - 如果表格在固定高度容器内(如带
overflow-y: auto的 div),把window.scrollTo换成目标容器的scrollTop = 0,例如:document.querySelector('.layui-table-box').scrollTop = 0 - 避免用
animate或behavior: 'smooth',Layui 低版本不兼容,且会和分页动画冲突
为什么不用 page 事件监听?
page 事件触发时机是“用户点了页码”,但此时 table 还在发请求、解析数据、重绘 DOM,scrollTo 执行了也白执行——页面根本没变。
典型问题:
- 写了
table.on('page(test)', function(obj){ window.scrollTo(0, 0); }),但滚动无效 - 加了
console.log发现page事件比done早 100ms+ 触发 - 某些网络慢的环境,
done延迟更明显,page里滚屏几乎必失败
移动端 Safari 下 scrollTop 失效怎么办?
iOS Safari 对 scrollTop 有严格限制:如果目标元素没设置 overflow: auto/scroll 且触发过 touch 事件,直接赋值可能被忽略。
解决方法:
- 确保滚动容器有明确的
height和overflow-y: auto(不能靠父级撑开) - 改用
element.scrollIntoView({block: 'start', behavior: 'auto'}),对首个表格行元素调用 - 兜底写法:
element.scrollTop = 0; element.scrollIntoView({block: 'start'});
复杂点在于:不同 Layui 版本对 DOM 结构处理不一致,2.8.x 后 .layui-table-box 才稳定作为滚动容器;老项目若用自定义高度表格,得先 querySelector 到真实滚动父节点再操作。











