如何简化导航栏中滚动到页面指定位置的按钮代码？

你的这段代码重复度很高，完全可以通过封装通用函数或者事件委托来大幅简化，以下是两种实用的优化方案：

方案一：封装通用滚动函数 #

把重复的滚动逻辑抽成一个接受选择器参数的通用函数，后续调用时只需传入目标元素的选择器即可：

function scrollToSection(selector) {
  const section = document.querySelector(selector);
  // 增加判断避免找不到元素时抛出错误
  if (section) {
    section.scrollIntoView({ behavior: "smooth" });
  }
}

使用时，导航按钮的点击事件直接调用该函数并传入对应选择器：

• 回到顶部：scrollToSection(".body")
• 滚动到关于我：scrollToSection(".about-me")
• 滚动到项目：scrollToSection(".projects")
• 滚动到联系：scrollToSection(".footer")

方案二：使用事件委托（更简洁） #

如果导航按钮结构统一，可以给导航容器绑定一个点击事件，通过按钮上的自定义属性获取目标选择器，仅需一段代码就能处理所有按钮的滚动逻辑：

首先给HTML中的导航按钮添加data-section属性，指定对应的目标选择器：

<!-- 示例导航按钮结构 -->
<div class="nav-bar">
  <button data-section=".body">顶部</button>
  <button data-section=".about-me">关于我</button>
  <button data-section=".projects">项目</button>
  <button data-section=".footer">联系</button>
</div>

然后编写JS代码：

// 给导航容器绑定点击事件
document.querySelector('.nav-bar').addEventListener('click', (e) => {
  // 从点击的按钮上获取目标选择器
  const targetSelector = e.target.dataset.section;
  if (targetSelector) {
    const section = document.querySelector(targetSelector);
    // 使用可选链操作符简化判断，若元素存在则执行滚动
    section?.scrollIntoView({ behavior: "smooth" });
  }
});

这种方式不需要单独定义多个函数，后续新增导航按钮时，只需添加对应data-section属性即可，扩展性更强。

内容的提问来源于stack exchange，提问作者Freddie Heath