本文介绍一种不依赖硬编码 id、仅通过 html 结构关系实现节段间平滑跳转的纯 javascript 导航方案，适用于多 section 页面的线性浏览场景。
本文介绍一种不依赖硬编码 id、仅通过 html 结构关系实现节段间平滑跳转的纯 javascript 导航方案，适用于多 section 页面的线性浏览场景。
在构建单页长内容（如向导、教程或分步表单）时，常需在多个 <section></section> 元素间提供“上一步/下一步”导航。若直接使用 href="#div_2" 硬编码 ID，会降低结构可维护性；而手动管理 ID 序列又易出错。更优雅的方式是利用 DOM 元素的天然兄弟关系——即通过 nextElementSibling 和 previousElementSibling 动态定位目标节段。
实现分为两步：语义化标记与逻辑化绑定。
首先，在每个导航链接中添加统一类名与方向标识：
<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>
关键点在于：
-
class="navigate"用于批量事件委托； -
data-direction="next"或"prev"明确导航意图，取代模糊的href="#"。
接着，用原生 JavaScript 绑定点击行为：
document.querySelectorAll('.navigate').forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认跳转
const currentSection = this.parentElement; // 获取当前 section
let targetSection;
if (this.dataset.direction === 'next') {
targetSection = currentSection.nextElementSibling;
} else if (this.dataset.direction === 'prev') {
targetSection = currentSection.previousElementSibling;
}
// 安全检查：确保目标节段存在
if (targetSection && targetSection.tagName === 'SECTION') {
targetSection.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
✅ 优势说明：
-
零 ID 依赖：无需知道
#div_1、#div_2等具体值，完全解耦结构与逻辑； -
强健容错：通过
if (targetSection)判断边界（如首节段无 Previous，末节段无 Next），避免报错； -
平滑体验：
scrollIntoView({ behavior: 'smooth' })提供原生滚动动画； -
可扩展性强：新增
<section></section>无需修改 JS，只需按规则添加对应链接即可。
⚠️ 注意事项：
- 确保所有导航链接的父元素均为
<section></section>（或统一容器），否则parentElement可能指向非预期节点； - 若页面存在其他非
<section></section>的兄弟元素（如<header></header>、<div>），建议为导航节段添加统一容器（如 <code><main class="stepper"></main>），并改用closest()+querySelectorAll()定位更精确的上下文； - 在 Safari 等旧版浏览器中，
scrollIntoView({ behavior: 'smooth' })可能不支持，可添加轻量降级（如behavior: 'auto'）或引入 polyfill。
该方案以最小侵入性实现了高内聚、低耦合的节段导航，是现代语义化 Web 开发中值得复用的基础交互模式。
