React Router实现ScrollToTop功能出现非瞬时滚动动画问题咨询

问题原因 #

这个现象属于正常表现，核心原因有两个：

• useEffect的触发时机是在组件渲染到屏幕之后，路由跳转时新页面组件先渲染、旧滚动位置保留，之后才执行滚动逻辑，因此会出现短暂停留在原滚动位置的视觉差
• 若全局CSS设置了scroll-behavior: smooth，滚动动作会被自动加上平滑过渡动画，无法瞬时完成

解决方案 #

1. 显式指定滚动行为为无动画 #

将window.scrollTo(0, 0)调整为对象参数写法，强制指定behavior: auto覆盖全局样式的平滑滚动配置：

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'auto'
})

2. 替换useEffect为useLayoutEffect消除视觉差 #

useLayoutEffect的触发时机在DOM更新完成后、浏览器绘制页面前，会在页面内容展示到屏幕前就完成滚动位置修改，彻底解决先停留在底部再滚动的问题。调整后的完整ScrollToTop组件代码如下：

import { useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'auto'
        });
    }, [pathname]);

    return null;
}

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