本文介绍一种无需硬编码id、动态识别上一节或下一节并平滑滚动至目标区域的纯javascript导航方案，适用于多章节布局的单页应用。
本文介绍一种无需硬编码id、动态识别上一节或下一节并平滑滚动至目标区域的纯javascript导航方案，适用于多章节布局的单页应用。
在构建单页长内容（如产品介绍、表单向导或文档阅读页）时，常需在多个 <section></section> 之间进行语义化跳转。若直接使用 href="#div_2" 等硬编码锚点，不仅维护成本高，还破坏结构灵活性——一旦增删章节或重命名ID，所有链接即失效。
更健壮的解法是基于DOM层级关系动态定位目标节区：点击“Next”时跳转到当前 <section></section> 的下一个兄弟元素；点击“Previous”时则跳转至上一个兄弟元素。这完全规避了对具体ID的依赖，使HTML结构具备自描述性和可扩展性。
✅ 实现步骤
-
统一标记导航链接：为每个
<a></a>添加class="navigate"便于批量绑定事件，并通过data-direction="next"或data-direction="prev"明确导航意图； -
利用
parentElement定位当前节区； -
使用
nextElementSibling/previousElementSibling获取相邻<section></section>（注意：仅匹配元素节点，自动忽略文本/注释节点）； -
调用
scrollIntoView({ behavior: 'smooth' })实现流畅滚动（现代浏览器原生支持，无需额外库）。
? 示例代码
<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>
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> 元素（可选增强）
if (targetSection && targetSection.tagName === 'SECTION') {
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});</section>
⚠️ 注意事项
-
nextElementSibling和previousElementSibling返回的是紧邻的元素节点，不包含空格、换行等文本节点，因此HTML中即使存在缩进也不会影响逻辑； - 若首节点击“Previous”或末节点击“Next”，
targetSection将为null，代码已内置防御性判断，避免报错； - 如需兼容旧版IE，可替换为
scrollIntoView()（无平滑效果）或引入smooth-scrollpolyfill； - 进阶建议：结合
IntersectionObserver实现滚动高亮当前章节，或添加URL哈希同步（history.pushState），提升SEO与分享体验。
该方案轻量、语义清晰、零依赖，是构建可维护单页导航的理想实践。
