layui分页怎么实现点击页码自动回顶部-Layui教程-PHP中文网

scrollto(0,0)无效是因为page事件触发过早，dom尚未更新；正确做法是在table.render的done回调中用settimeout延迟执行，滚动目标应为实际滚动容器（如.layui-body），而非window。

layui分页怎么实现点击页码自动回顶部

为什么 page 事件里 scrollTo(0, 0) 没反应

因为 table.on('page(test)') 触发时机太早——用户刚点页码，表格还在发请求、解析数据、重绘 DOM，此时执行 window.scrollTo(0, 0)，页面根本没变，滚动自然无效。

常见错误写法：
table.on('page(test)', function(obj){ window.scrollTo(0, 0); });
这个回调里 DOM 还没更新，scrollTo 白执行。

page 事件只表示“用户点了”，不保证新内容已渲染
表格重绘完成的唯一可靠钩子是 done 回调
即使写了 done，也要加 setTimeout(..., 0)，让浏览器完成 DOM 更新和样式计算

用 table.render 的 done 回调 + setTimeout 滚回顶部

这是最稳的方案，适用于全局滚动（即整个页面上下滚动）。

在 table.render() 配置中加入：

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

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

下载

done: function(res, curr, count) {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 0);
}

不要用 behavior: 'smooth'，Layui 低版本不兼容，且会和分页动画冲突
如果页面实际滚动容器不是 window（比如 .layui-body 设了 overflow-y: auto），就得换目标
检查 computed style：打开开发者工具，选中 .layui-body，看 overflow-y 是否为 auto 或 scroll

表格容器局部滚动时，该滚谁？

很多 Layui 后台布局中，滚动发生在 .layui-body 内部，而不是整个窗口。这时 window.scrollTo 完全无效。

正确做法是操作容器本身：

done: function(res, curr, count) {
  setTimeout(() => {
    const body = document.querySelector('.layui-body');
    if (body) body.scrollTop = 0;
  }, 0);
}

别用 document.documentElement.scrollTop 或 document.body.scrollTop，对 Layui 布局基本不起作用
如果表格启用了 height 配置（如 height: 400），那滚动容器其实是 .layui-table-box，要改成：document.querySelector('.layui-table-box').scrollTop = 0
务必加存在性判断（if (body)），避免控制台报错中断后续逻辑

分页栏里加“回到顶部”按钮怎么塞进去

不能靠 page.layout 或 toolbar 配置，因为分页栏是动态生成的，早期钩子查不到它。

必须在 done 回调里延迟查找并插入：

done: function(res, curr, count) {
  setTimeout(() => {
    const pager = document.querySelector('.layui-table-page .layui-laypage');
    if (!pager || layui.$('.layui-btn-top').length) return;
    
    const btn = document.createElement('button');
    btn.className = 'layui-btn layui-btn-primary layui-btn-sm layui-btn-top';
    btn.innerHTML = '回到顶部';
    btn.onclick = () => {
      const body = document.querySelector('.layui-body');
      if (body) body.scrollTop = 0;
    };
    pager.insertBefore(btn, pager.firstChild);
  }, 10);
}