iOS移动端浏览器路由切换后无法滚动至顶部（轻微滚动场景）

问题根源 #

iOS上的Safari和Chrome（均基于WebKit内核）在路由切换时会保留前一页的滚动位置，且浏览器的自动滚动恢复机制优先级高于手动调用的window.scrollTo(0, 0)——尤其是从轻微滚动的页面跳转时，内置行为会直接覆盖你的代码，导致滚动失效。该现象在Next.js、React Router项目中普遍存在，但Android Chrome无此问题。

可行解决方案 #

1. 禁用浏览器自动滚动恢复 + 强制滚动（推荐）

直接关闭浏览器的滚动恢复功能，从根源避免冲突，同时在路由切换时强制滚动到顶部。

React Router 示例：
创建全局滚动控制组件，放在路由根组件外层：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export function ScrollToTop() {
  const location = useLocation();

  useEffect(() => {
    // 禁用浏览器自动恢复滚动位置
    history.scrollRestoration = 'manual';
    // 用requestAnimationFrame确保在浏览器渲染周期内执行
    const scrollToTop = () => {
      window.scrollTo(0, 0);
    };
    scrollToTop();
    requestAnimationFrame(scrollToTop);
  }, [location.pathname]);

  return null;
}

// 在App中使用：
function App() {
  return (
    <>
      <ScrollToTop />
      <Routes>
        {/* 你的路由配置 */}
      </Routes>
    </>
  );
}

Next.js 示例：
在_app.tsx中监听路由切换事件：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteComplete = () => {
      history.scrollRestoration = 'manual';
      // 双重确保滚动生效
      window.scrollTo(0, 0);
      requestAnimationFrame(() => window.scrollTo(0, 0));
    };

    router.events.on('routeChangeComplete', handleRouteComplete);
    return () => router.events.off('routeChangeComplete', handleRouteComplete);
  }, [router]);

  return <Component {...pageProps} />;
}

2. 延迟执行滚动操作

如果不想禁用滚动恢复，可以给scrollTo加个小延迟，避开浏览器自动滚动的时机：

useEffect(() => {
  // 100ms延迟足够避开浏览器的自动滚动恢复
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);
}, []);

注意：延迟时间不宜过长，避免用户感知到页面跳动。

3. 直接操作DOM元素的scrollTop

当window.scrollTo无效时，直接设置根元素的滚动位置：

useEffect(() => {
  requestAnimationFrame(() => {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
  });
}, []);

测试注意事项 #

• 必须在真实iOS设备上测试，模拟器的WebKit行为可能与真机不一致；
• 重点测试"轻微滚动首页后跳转"的场景，这是问题高发的触发条件。

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