JS修改scrollTop实现自动滚动时，scroll-behavior:smooth锚点平滑滚动失效

问题根源 #

两类滚动逻辑的运行机制存在冲突：

• 浏览器原生的锚点平滑滚动，需要在滚动过程中逐帧更新页面整体的scrollY值实现动画
• 公告容器#contain的自动滚动逻辑，会每100ms强制修改自身的scrollTop值，这个高频的属性修改会打断页面级的滚动动画状态，最终导致平滑跳转失效、变成瞬跳效果。

修复步骤 #

1. 先修正原有公告滚动逻辑的原生缺陷 #

原有代码存在几处基础问题，先一并修正才能保证后续功能正常：

• 替换所有重复的id="scroll-text"为class="scroll-text"：HTML规范中id必须全局唯一，当前多个公告块共用同一个id会导致JS选择器只能取到第一个元素，逻辑完全失效。
• 修正克隆循环的逻辑bug：原有代码在each循环内每次克隆全部公告块，会导致内容无限制重复翻倍。
• 补充无缝循环的位置判断：当公告内容滚动到底部时，自动将scrollTop归零，实现连续滚动效果。

修正后的公告滚动完整代码：

let scrollTimer = null;
const containEl = document.getElementById("contain");
const allScrollText = document.querySelectorAll(".scroll-text");

// 初始化公告内容：克隆原有公告块实现无缝滚动的内容储备
function initAnnouncementContent() {
  allScrollText.forEach(item => {
    containEl.appendChild(item.cloneNode(true));
  });
}

// 公告自动滚动核心逻辑
function startAnnouncementAutoScroll() {
  containEl.scrollTop = containEl.scrollTop + 2;
  // 滚动到底部时归零，实现循环
  if (containEl.scrollTop >= containEl.scrollHeight - containEl.clientHeight) {
    containEl.scrollTop = 0;
  }
  scrollTimer = setTimeout(startAnnouncementAutoScroll, 100);
}

document.addEventListener("DOMContentLoaded", () => {
  initAnnouncementContent();
  startAnnouncementAutoScroll();

  // 保留原有悬停暂停的交互
  containEl.addEventListener("mouseover", () => clearTimeout(scrollTimer));
  containEl.addEventListener("mouseout", () => startAnnouncementAutoScroll());
});

2. 解决滚动冲突的核心处理 #

在用户触发锚点跳转的全流程中，临时暂停公告的自动滚动逻辑，避免高频scrollTop修改打断页面平滑滚动：

• 当用户点击锚点链接时，立刻清除公告的滚动定时器，停止对#contain的scrollTop修改
• 触发页面原生的平滑滚动逻辑
• 检测到页面滚动完全停止后，再恢复公告的自动滚动功能

对应实现代码：

// 选中所有指向页面内锚点的链接
const anchorLinks = document.querySelectorAll('a[href^="#"]');

anchorLinks.forEach(link => {
  link.addEventListener("click", (e) => {
    const targetId = link.getAttribute("href");
    const targetEl = document.querySelector(targetId);
    // 非页面锚点的链接不做处理
    if (!targetEl || targetId === "#") return;
    e.preventDefault();

    // 关键操作：立刻暂停公告自动滚动，切断冲突来源
    clearTimeout(scrollTimer);

    // 触发平滑滚动到目标锚点
    targetEl.scrollIntoView({ behavior: "smooth" });

    // 检测页面滚动是否停止，停止后恢复公告滚动
    let lastScrollY = window.scrollY;
    const scrollStableCheck = setInterval(() => {
      if (Math.abs(window.scrollY - lastScrollY) < 1) {
        clearInterval(scrollStableCheck);
        startAnnouncementAutoScroll();
      }
      lastScrollY = window.scrollY;
    }, 100);
  })
})

补充说明 #

• 你配置的html { scroll-behavior: smooth; }本身功能正常，不需要做任何修改，只要保证页面平滑滚动过程中没有其他脚本高频修改滚动相关属性，就能正常生效。
• 原有代码中setTimeout('pageScroll()', 100)的字符串传参写法存在作用域查找隐患，已修正为直接传入函数引用的写法，兼容性和可靠性更高。

内容的提问来源于stack exchange，提问作者Marco P.