无需硬编码ID，实现通过Next/Previous按钮在Sections间导航的方案

嘿，我完全懂你的需求——不用硬写section的ID，点击Next/Previous按钮就能在各个section之间自由跳转，对吧？这事儿用JavaScript就能轻松搞定，完全不用依赖固定的ID值，咱们直接通过元素的层级关系来动态定位目标section就行。

第一步：整理HTML结构（给按钮加统一类名） #

首先给导航按钮加上统一的类，方便后续用JS选择，不用管section的ID是什么：

<section>
  <a href="#" class="nav-btn next">Next</a>
</section>
<section>
  <a href="#" class="nav-btn next">Next</a>
  <a href="#" class="nav-btn prev">Previous</a>
</section>
<section>
  <a href="#" class="nav-btn prev">Previous</a>
</section>

第二步：编写JavaScript逻辑 #

核心思路就是：点击按钮时，先找到当前按钮所在的section，再根据按钮类型（Next/Previous）获取相邻的section，最后滚动过去。代码如下：

// 获取所有导航按钮
const navButtons = document.querySelectorAll('.nav-btn');

navButtons.forEach(button => {
  button.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止a标签默认的跳转行为
    
    // 找到当前按钮所属的section（不管section有没有ID都能找到）
    const currentSection = button.closest('section');
    
    if (button.classList.contains('next')) {
      // 获取当前section的下一个兄弟section
      const nextSection = currentSection.nextElementSibling;
      if (nextSection) {
        // 平滑滚动到目标section，体验更友好
        nextSection.scrollIntoView({ behavior: 'smooth' });
      }
    } else if (button.classList.contains('prev')) {
      // 获取当前section的上一个兄弟section
      const prevSection = currentSection.previousElementSibling;
      if (prevSection) {
        prevSection.scrollIntoView({ behavior: 'smooth' });
      }
    }
  });
});

关键逻辑解释 #

• button.closest('section')：从点击的按钮出发，向上查找最近的section父元素，完全不依赖ID，哪怕section没有ID也能精准定位。
• nextElementSibling/previousElementSibling：直接获取当前section的相邻兄弟元素，不管section的ID是啥，只要它们是相邻的就能跳转。
• scrollIntoView({ behavior: 'smooth' })：实现平滑滚动的效果，如果不需要平滑，去掉{ behavior: 'smooth' }即可。

可选：添加样式让效果更直观 #

如果想让每个section占满屏幕，跳转效果更明显，可以加一点CSS：

section {
  height: 100vh; /* 每个section占满视口高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.nav-btn {
  padding: 0.5rem 1rem;
  text-decoration: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}

.nav-btn:hover {
  background-color: #0056b3;
}

这样一来，不管你的section有没有ID、ID是什么，点击Next/Previous按钮都能精准跳转到对应的相邻section啦！

备注：内容来源于stack exchange，提问作者Jawad