HTML分页实现方法与代码示例

本文深入解析了在纯静态HTML环境中实现分页的三种核心方案：一是利用CSS与JavaScript动态切割DOM、按页渲染内容，适合小数据量且追求无刷新体验的场景；二是零JS的锚点跳转方式，虽简单却存在URL不同步、无导航逻辑等明显缺陷；三是真正符合“静态”本质的多文件生成方案，通过脚本批量产出独立HTML页面，兼顾SEO友好性、浏览器原生导航支持与部署稳定性——文章不仅提供可直接运行的代码示例，更一针见血地指出常见误区，帮助开发者根据实际需求选择最恰当、最可靠的分页实现路径。

静态页面没法真分页，只能模拟

HTML 本身没有分页能力，index.html 打开就是全部内容。所谓“静态分页”，本质是把长内容切块、用 JS 控制显隐，或靠锚点跳转——不是服务端那种每次请求新页，也不涉及数据库或后端路由。

用 CSS + JS 切割 DOM 实现最简翻页

适合几十条数据以内的列表（比如产品简介、FAQ 条目），不刷新页面，体验接近真实分页：

• 先用 document.querySelectorAll() 把所有条目节点选出来
• 按每页数量（如 pageSize = 5）切分成二维数组：chunks
• 用 innerHTML 或 replaceChildren() 动态替换容器内容
• 翻页按钮绑定 onclick，更新当前页码并重绘

示例关键逻辑：

const items = Array.from(document.querySelectorAll('.item'));
const pageSize = 5;
const chunks = [];
for (let i = 0; i 

纯 HTML 锚点分页：零 JS，但体验割裂
如果完全不想写 JS，可用  跳转到页面内不同 
 区域。缺点明显：

• 浏览器滚动到目标位置，但 URL 变成 index.html#page2，无法前进/后退切换页
• 每页内容仍随 HTML 一起加载，大文本下首屏慢
• 没有“上一页/下一页”按钮逻辑，得手动加链接

适合极简场景，比如单页简历的章节导航，别当真分页用。