通过为导航链接添加统一类名和方向标识，利用 javascript 动态定位相邻 section 并平滑滚动，无需硬编码 id 或 href 值，即可实现灵活、可复用的章节间跳转。
通过为导航链接添加统一类名和方向标识，利用 javascript 动态定位相邻 section 并平滑滚动，无需硬编码 id 或 href 值，即可实现灵活、可复用的章节间跳转。
在构建多步骤表单、文档分页或长内容分节展示时，常需“上一节 / 下一节”导航功能。但若依赖 href="#div_2" 硬编码 ID，会严重降低结构可维护性——新增/重排 section 时需同步修改所有链接。更优雅的方案是基于 DOM 层级关系动态计算目标节点。
核心思路是：点击链接时，获取其父 <section></section>，再通过 nextElementSibling 或 previousElementSibling 获取逻辑上的下一节或上一节，最后调用 scrollIntoView() 实现平滑滚动。
✅ 正确的 HTML 结构（语义清晰、无硬编码）：
<section id="div_1"><a href="#" class="navigate" data-direction="next">Next</a> </section><section id="div_2"><a href="#" class="navigate" data-direction="next">Next</a> <a href="#" class="navigate" data-direction="prev">Previous</a> </section><section id="div_3"><a href="#" class="navigate" data-direction="prev">Previous</a> </section>
✅ 对应的健壮 JavaScript 实现：
document.querySelectorAll('.navigate').forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认跳转行为
const currentSection = this.parentElement;
let targetSection;
if (this.dataset.direction === 'next') {
targetSection = currentSection.nextElementSibling;
} else if (this.dataset.direction === 'prev') {
targetSection = currentSection.previousElementSibling;
}
// 安全检查：确保目标 section 存在且为 <section> 元素（可选增强）
if (targetSection && targetSection.tagName === 'SECTION') {
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});</section>
⚠️ 注意事项：
-
nextElementSibling/previousElementSibling只匹配元素节点（忽略文本、注释等），比nextSibling更可靠； - 若首节点击 “Previous” 或末节点击 “Next”，
targetSection为null，代码中已通过if (targetSection)安全处理，不会报错； - 可进一步封装为可复用函数，支持自定义容器选择器（如
section[data-nav="enabled"]）或添加过渡动画回调； - 如需支持键盘导航（如 ← → 方向键），可监听
keydown事件并复用相同逻辑。
该方案完全解耦 HTML 结构与 JS 行为，增删 section 无需修改任何脚本，真正实现「写一次，随处可用」的导航能力。
