如何实现无需scrollIntoView的JavaScript动画滚动（支持自定义时长）

直接上满足需求的实现——这个函数用requestAnimationFrame实现轻量动画，支持自定义滚动时长（默认80ms，符合你要求的100ms以内），不会阻塞主线程，能缓解FID问题：

function smoothScrollTo(element, duration = 80) {
  const targetPos = element.getBoundingClientRect().top + window.pageYOffset;
  const startPos = window.pageYOffset || document.documentElement.scrollTop;
  const distance = targetPos - startPos;
  let startTime = null;

  const animate = (currentTime) => {
    startTime = startTime || currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    // 线性缓动，简单高效，避免额外计算开销
    const currentPos = startPos + distance * progress;
    
    window.scrollTo({ top: currentPos, behavior: 'auto' });
    
    if (timeElapsed < duration) {
      requestAnimationFrame(animate);
    }
  };

  requestAnimationFrame(animate);
}

使用方法 #

// 滚动到id为"target"的元素，时长80ms
smoothScrollTo(document.getElementById('target'), 80);

关键优势 #

• 用requestAnimationFrame驱动动画，完全遵循浏览器渲染周期，不会抢占主线程资源，降低FID风险
• 时长精确可控，你可以根据需求调整（比如70ms、90ms），确保在100ms以内完成
• 纯原生JS实现，无需依赖任何库，体积小性能高
• 线性缓动保证滚动过程平滑但不拖沓，兼顾UX和性能

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