单击导航后将模式滚动到顶部

<nav>
  <ul>
    <li><a class="scroll-to-top" href="#section1">Section 1</a></li>
    <li><a class="scroll-to-top" href="#section2">Section 2</a></li>
    <li><a class="scroll-to-top" href="#section3">Section 3</a></li>
  </ul>
</nav>

<section id="section1">
  <!-- Section 1 content -->
</section>

<section id="section2">
  <!-- Section 2 content -->
</section>

<section id="section3">
  <!-- Section 3 content -->
</section>

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
}

// 获取所有具有scroll-to-top类的链接元素
const links = document.querySelectorAll('.scroll-to-top');

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

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

    if (targetElement) {
      // 使用scrollIntoView方法将页面滚动到目标位置
      targetElement.scrollIntoView({
        behavior: 'smooth' // 平滑滚动效果
      });
    }
  });
});