点击板块切换按钮时，如何添加window.scrollTo(0,0)实现页面滚顶

你只需要把window.scrollTo(0, 0)放在页面板块切换逻辑执行完成后的位置即可，具体来说是在切换section的active类之后。

修改后的完整代码如下：

const sections = document.querySelectorAll(".section");
const sectBtns = document.querySelectorAll(".controls");
const sectBtn = document.querySelectorAll(".control");
const allSections = document.querySelectorAll(".main-content");

function PageTransitions() {
  // Button click active class
  for (let i = 0; i < sectBtn.length; i++) {
    sectBtn[i].addEventListener("click", function () {
      let currentBtn = document.querySelectorAll(".active-btn");
      currentBtn[0].className = currentBtn[0].className.replace(
        "active-btn",
        ""
      );
      this.className += " active-btn";
    });
  }

  //Sections Active
  allSections[0].addEventListener("click", e => {
    const id = e.target.dataset.id;
    if (id) {
      // 移除其他按钮的active类
      sectBtns.forEach(btn => {
        btn.classList.remove("active");
      });
      e.target.classList.add("active");

      // 隐藏其他板块
      sections.forEach(section => {
        section.classList.remove("active");
      });

      // 显示目标板块
      const element = document.getElementById(id);
      element.classList.add("active");

      // 切换完成后滚动到页面顶部
      window.scrollTo(0, 0);
    }
  });
}

PageTransitions();

为什么放在这里？ #

当点击按钮触发板块切换逻辑时，代码会先完成「按钮状态更新」「隐藏旧板块」「显示新板块」这一系列操作，最后执行window.scrollTo(0, 0)，能确保新板块的内容从页面顶部开始展示，避免用户停留在之前的滚动位置，提升体验。

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