React JS中window.scroll后如何让Div聚焦到顶部？

问题根源 #

滚动后组件居中而非顶部，是因为scrollIntoView默认使用block: 'center'的配置；而focus()未生效，大概率是滚动动画还没完成就执行了聚焦，或者元素的tabIndex设置不合理。

修复步骤 #

1. 修正滚动逻辑，确保滚动到组件顶部
   修改你的scrollToComponent函数，明确指定block: 'start'参数：

   const scrollToComponent = (element) => {
     element.scrollIntoView({
       behavior: 'smooth', // 保持动画效果
       block: 'start',     // 强制滚动到元素顶部
       inline: 'nearest'
     });
   };
   

2. 解决聚焦不生效的问题
   由于滚动是异步动画，需要等待滚动完成后再执行聚焦操作，同时调整tabIndex为-1（避免干扰默认键盘导航顺序，仅用于编程式聚焦）：

   • 先修改B组件的tabIndex：

     <div tabIndex="-1" id="b" className="step" ref={props.domRef}>
       {/* 组件内容 */}
     </div>
     

   • 然后更新useEffect中的逻辑，等待滚动结束后聚焦：

     useEffect(() => {
       const targetEl = refs.current[step];
       if (!targetEl) return;
     
       // 执行滚动
       targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
     
       // 监听滚动结束事件
       const handleScrollEnd = () => {
         // 聚焦时禁止自动滚动，避免覆盖之前的滚动结果
         targetEl.focus({ preventScroll: true });
         window.removeEventListener('scroll', handleScrollEnd);
       };
       window.addEventListener('scroll', handleScrollEnd);
     
       // 清理监听
       return () => window.removeEventListener('scroll', handleScrollEnd);
     }, [step]);
     

替代方案（如果滚动函数无法修改） #

如果scrollToComponent是第三方函数或无法直接修改，可以手动计算滚动位置：

useEffect(() => {
  const targetEl = refs.current[step];
  if (!targetEl) return;

  // 计算元素相对于视口的顶部位置
  const topOffset = targetEl.getBoundingClientRect().top + window.pageYOffset;
  
  // 滚动到目标位置
  window.scrollTo({
    top: topOffset,
    behavior: 'smooth'
  });

  // 后续聚焦逻辑同上
}, [step]);

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