scrollIntoView与scrollTo实现平滑滚动失效问题求助

你的代码里最关键的错误是事件监听的事件名写错了——addEventListener的第一个参数必须是小写的"click"，而不是大写开头的"Click"。这个错误会导致点击事件根本不会触发你的滚动函数，自然看不到任何平滑滚动效果。

修正后的代码示例 #

方案1：使用scrollIntoView #

function initScrollSuave() {
  const linksInternos = document.querySelectorAll('.js-menu a[href^="#"]');

  function scrollToSection(event) {
    event.preventDefault();
    const href = event.currentTarget.getAttribute("href");
    const section = document.querySelector(href);

    // 先确认目标区块存在，避免报错
    if (!section) return;

    section.scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  }

  // 修正事件名为小写的click
  linksInternos.forEach((link) => {
    link.addEventListener("click", scrollToSection);
  });
}

initScrollSuave();

方案2：使用scrollTo #

function initScrollSuave() {
  const linksInternos = document.querySelectorAll('.js-menu a[href^="#"]');

  function scrollToSection(event) {
    event.preventDefault();
    const href = event.currentTarget.getAttribute("href");
    const section = document.querySelector(href);

    if (!section) return;

    const topo = section.offsetTop;
    window.scrollTo({
      top: topo,
      behavior: "smooth",
    });
  }

  linksInternos.forEach((link) => {
    link.addEventListener("click", scrollToSection);
  });
}

initScrollSuave();

额外排查点 #

如果修正后还是无效，可以检查以下几点：

• 确认目标section能被正确获取：在函数里加console.log(section)，如果输出null，说明你的选择器或者href属性有问题
• 检查CSS冲突：如果全局设置了scroll-behavior: auto，或者父元素设置了overflow: hidden/overflow: scroll，可能会影响页面全局滚动
• 排除其他代码干扰：确认没有其他点击事件监听器调用event.stopPropagation()，阻止了当前函数的执行

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