Angular12如何在路由切换时自动滚动到页面顶部

通用原生JS方案 #

如果是原生JS实现的前端路由：

• 监听路由变化事件（比如hashchange或者popstate），触发后执行window.scrollTo(0, 0)即可
• 如果路由切换有过渡动画，把滚动逻辑放在动画结束的回调里执行，避免动画过程中出现滚动异常

Vue 框架方案 #

Vue2 + Vue Router v3 #

在路由实例配置里添加scrollBehavior方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 有保存的滚动位置时返回保存的位置，否则滚动到顶部
    return savedPosition || { x: 0, y: 0 }
  }
})

Vue3 + Vue Router v4 #

scrollBehavior配置逻辑和上面一致，返回值格式调整为：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 }
  }
})

React 框架方案 #

React Router v6 #

两种可选实现方式：

1. 全局封装一个滚动复位组件，在根路由下挂载：

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

const ScrollToTop = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return null;
}

// 根组件里引用
function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <Routes>
        {/* 路由配置 */}
      </Routes>
    </BrowserRouter>
  )
}

2. 针对指定路由跳转时复位，在跳转的事件回调里调用window.scrollTo(0, 0)即可

注意事项 #

• 如果滚动容器不是全局window，而是页面内的自定义滚动盒子，需要把window.scrollTo替换为对应DOM元素的滚动属性设置：document.querySelector('.scroll-container').scrollTop = 0
• 部分浏览器有自动恢复滚动位置的行为，可在HTML头部添加<meta name="scroll-restoration" content="manual">禁用默认恢复逻辑

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