Angular路由切换时移动端未自动滚动到页面顶部问题求助

你当前的viewport配置是标准写法，不需要调整，该问题90%以上的场景和viewport参数无关，可按以下方案排查修复：

1. 确认滚动容器是否为根节点 #

很多Angular项目会给app-root、外层布局容器设置height: 100%、overflow: auto属性，此时滚动主体不是window/body，所有作用于window的滚动API自然失效：

• 先手动在移动端控制台执行window.scrollTo(0,0)，如果页面没有滚动，即可确认是该问题
• 找到实际滚动的容器节点，直接操作容器的滚动属性即可，示例代码：

// 假设实际滚动容器类名为main-container
const scrollContainer = document.querySelector('.main-container');
if (scrollContainer) {
  scrollContainer.scrollTop = 0;
}

2. 调整滚动API的执行时机 #

移动端渲染速度比桌面端慢，直接在NavigationEnd事件触发时执行滚动，可能此时新页面的DOM还未渲染完成，导致滚动失效：

• Angular 16+ 版本可使用afterNextRender钩子等待渲染完成后执行：

import { afterNextRender } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

// ...
constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      afterNextRender(() => {
        // 替换为你实际的滚动逻辑，容器滚动就换容器的API
        window.scrollTo({top: 0, left: 0, behavior: 'instant'});
      });
    }
  })
}

• 低版本Angular可使用setTimeout兜底：

setTimeout(() => {
  window.scrollTo(0, 0);
}, 0);

3. 兼容iOS Safari特殊表现 #

iOS Safari对滚动API的限制较多，如果是苹果设备出现该问题，可同时设置多个滚动属性兜底：

window.scrollTo(0, 0);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

4. 关闭默认滚动恢复逻辑 #

如果设置了scrollPositionRestoration: 'top'仍然失效，可以关闭该配置，完全手动接管滚动逻辑，避免内置逻辑和自定义逻辑冲突：

imports: [
  RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'disabled', 
  })
],

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