用history.pushState()记录页面状态并监听popstate事件，可实现SPA中无刷新上/下一页；静态页应使用语义化标签配合禁用态与无障碍属性，避免history.go(-1)等破坏URL和SEO的行为。
怎么用 window.history 实现轻量上一页/下一页
不用后端、不刷新页面，仅靠浏览器历史 API 就能模拟「上一页」「下一页」行为——但前提是你的页面本身是单页应用（SPA）或通过 pushState 动态加载内容。直接调 history.back() 或 history.forward() 很容易失效，因为用户可能没真“前进”过。
实操建议：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 优先用
history.pushState()主动记录每一页状态，比如：history.pushState({page: 2}, '', '?page=2') - 绑定
popstate事件监听返回/前进动作，再手动更新 DOM 内容 - 禁用默认跳转时，
比空href="#"更安全，后者会滚到页面顶部 - 注意：Safari 对
pushState的 state 对象大小有限制（约 640KB），别往里塞大数组或 DOM 节点
纯 HTML 静态页面怎么加真分页链接
如果你只是几页静态 HTML（如 page1.html、page2.html），那就别折腾 JS，老老实实用超链接。关键是怎么让「上一页」「下一页」链接始终有效，尤其在首页/末页时要禁用或隐藏。
常见错误现象：首页还显示「上一页」指向 page0.html，点开 404；或者用 CSS 隐藏但没加 aria-disabled，对屏幕阅读器不友好。
实操建议：
- 首页的「上一页」用
上一页，不带标签 - 末页同理，「下一页」不渲染链接，或加
tabindex="-1"+aria-disabled="true" - 路径写绝对 URL 更稳，比如
，避免相对路径在子目录下错乱 - 别用
onclick="history.go(-1)"替代真实链接——它不改变 URL，SEO 友好性为零，也不支持右键「在新标签打开」
按钮语义是「触发动作」，链接语义是「导航到资源」。分页本质是跳转，所以 是默认正确选择。但有些场景必须用 ，比如内容由 AJAX 加载、URL 不变。
性能与兼容性影响：
- 用
：天然支持中键点击、Ctrl+点击新开标签、浏览器前进/后退、书签保存，无 JS 也能工作 - 用
：必须配aria-label（如aria-label="下一页，当前第3页"），且需手动处理键盘 Enter/Space 触发 - 混用风险：同一组分页里部分用
、部分用，会导致焦点顺序混乱和语义断裂 - 移动端注意：iOS Safari 对
的默认缩放行为更敏感，可加style="-webkit-tap-highlight-color: transparent;"
为什么 scrollIntoView 常被漏掉
用户点「下一页」后，新内容加载完成，但滚动条还卡在页面底部或中间——尤其当页头有固定导航栏时，新内容第一行会被遮住。这不是分页逻辑问题，而是视觉反馈缺失。
容易被忽略的地方：
- 不要等整个页面重绘完再滚动，应在新内容插入 DOM 后立刻调
element.scrollIntoView({block: 'start', behavior: 'smooth'}) - 如果用
position: sticky头部，加scroll-margin-top避免贴顶，比如scroll-margin-top: 64px - 服务端渲染（SSR）页面首次加载时，也要检查是否需要初始滚动定位，比如锚点
#content - 别用
window.scrollTo(0, 0)粗暴置顶——用户可能刚看完底部评论，一翻页就回到顶部，体验割裂
实际做时，最麻烦的往往不是生成链接，而是边界状态同步：当前页码变量、URL 参数、DOM 按钮禁用态、滚动位置、历史栈深度——这些稍不一致，就会出现点「上一页」却跳到首页，或「下一页」按钮点了没反应之类的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
