通过为导航链接添加统一类名和方向标识，利用 javascript 动态定位相邻 section 并平滑滚动，无需硬编码 id 或依赖 url 锚点，即可实现灵活、可维护的页面内节段跳转。
通过为导航链接添加统一类名和方向标识，利用 javascript 动态定位相邻 section 并平滑滚动，无需硬编码 id 或依赖 url 锚点，即可实现灵活、可维护的页面内节段跳转。
在构建多步骤表单、文档分页或长页面内容分区时，常需在逻辑相邻的 <section></section> 间进行“上一步/下一步”导航。但若直接使用 href="#div_2" 等硬编码锚点，会破坏结构可扩展性——新增节段需同步修改所有链接；而仅用 href="#" 又无法触发有效跳转。
本方案采用语义化 DOM 遍历 + 行为解耦的设计思路：
✅ 不依赖 id 值本身，完全基于 HTML 中的物理顺序（nextElementSibling / previousElementSibling）；
✅ 导航逻辑与结构分离，增删 section 无需修改任何 JS；
✅ 支持平滑滚动体验，并具备边界防护（如首节段无“Previous”，末节段无“Next”时自动禁用）。
✅ 实现步骤
-
为所有导航链接添加统一标识
使用class="navigate"绑定事件监听器，并通过data-direction="next"或data-direction="prev"明确意图：
<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>
-
编写轻量级导航逻辑（ES6+）
使用querySelectorAll批量绑定事件，通过parentElement定位当前节段，再按方向获取相邻节段并滚动：
document.querySelectorAll('.navigate').forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault();
const currentSection = this.parentElement;
const direction = this.dataset.direction;
let targetSection;
if (direction === 'next') {
targetSection = currentSection.nextElementSibling;
} else if (direction === 'prev') {
targetSection = currentSection.previousElementSibling;
}
// 安全检查：确保目标节段存在
if (targetSection && targetSection.tagName === 'SECTION') {
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
⚠️ 注意事项与增强建议
-
无障碍支持：为
<section></section>添加tabindex="-1"可确保键盘用户滚动后能聚焦到目标区域； -
视觉反馈：可配合 CSS 添加
.section--active类，在滚动后高亮当前节段； -
兼容性：
scrollIntoView({ behavior: 'smooth' })在旧版 Safari 中需 Polyfill（如scroll-behavior-polyfill）； -
扩展性：如需支持跳转至非相邻节段（如“跳至第5步”），可将
data-direction替换为data-target="step-5"，并配合document.getElementById()查找，保持接口一致性。
该方案以最小侵入性达成最大灵活性，是现代单页应用中节段导航的理想实践。
