使用按钮通过导航栏为平滑滚动添加偏移量

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

<section id="section1">
  <!-- 页面内容 -->
</section>

<section id="section2">
  <!-- 页面内容 -->
</section>

<section id="section3">
  <!-- 页面内容 -->
</section>

// 获取导航栏中的所有链接
const links = document.querySelectorAll('nav a');

// 遍历每个链接，并添加点击事件监听器
links.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认的链接跳转行为

    const targetId = link.getAttribute('href'); // 获取目标位置的id
    const targetElement = document.querySelector(targetId); // 获取目标元素

    // 使用scrollIntoView()方法实现平滑滚动效果
    targetElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  });
});