Angular：更新视图后无需ScrollToTop，如何让视图回到顶部？

以下是几种不依赖scrollToTop方法的实现方式：

1. 锚点路由导航 #

在模板顶部添加锚点元素，通过Angular Router导航到该锚点触发页面滚动到顶部：

• 模板中添加锚点：

<div id="page-top"></div>
<!-- 其他视图内容 -->
<button (click)="updateViewAndScroll()">更新并回到顶部</button>

• 组件中处理点击事件，等待视图更新完成后导航到锚点：

import { Router } from '@angular/router';

constructor(private router: Router) {}

updateViewAndScroll() {
  // 执行视图更新逻辑（比如修改绑定的数据）
  this.updateData();

  // 等待视图更新完成后导航到锚点
  setTimeout(() => {
    this.router.navigate([], { 
      fragment: 'page-top',
      // 若需强制触发同路由导航，需在RouterModule配置中设置onSameUrlNavigation: 'reload'
      skipLocationChange: false
    });
  }, 0);
}

2. 元素scrollIntoView方法 #

通过获取页面顶部元素，调用其scrollIntoView方法实现滚动，这是针对DOM元素的操作，与全局scrollToTop方法不同：

• 模板中添加顶部元素的模板引用：

<div #topElement></div>
<!-- 其他视图内容 -->
<button (click)="updateViewAndScroll()">更新并回到顶部</button>

• 组件中获取元素并触发滚动：

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('topElement') topElement!: ElementRef<HTMLElement>;

updateViewAndScroll() {
  // 执行视图更新逻辑
  this.updateData();

  // 等待视图更新完成后执行滚动
  setTimeout(() => {
    this.topElement.nativeElement.scrollIntoView({
      block: 'start', // 确保元素顶部对齐视口
      behavior: 'auto' // 可选'smooth'实现平滑滚动
    });
  }, 0);
}

3. 直接设置滚动容器的scrollTop属性 #

直接修改页面滚动容器（如document.documentElement或body）的scrollTop属性为0，属于原生DOM操作：

updateViewAndScroll() {
  // 执行视图更新逻辑
  this.updateData();

  setTimeout(() => {
    // 兼容不同浏览器的滚动容器
    const scrollContainer = document.documentElement || document.body;
    scrollContainer.scrollTop = 0;
  }, 0);
}

4. 利用Angular CDK Scrolling模块（若项目已使用CDK） #

通过CDK的ScrollDispatcher获取所有滚动容器，统一设置滚动位置：

import { ScrollDispatcher } from '@angular/cdk/scrolling';

constructor(private scrollDispatcher: ScrollDispatcher) {}

updateViewAndScroll() {
  // 执行视图更新逻辑
  this.updateData();

  setTimeout(() => {
    this.scrollDispatcher.getScrollContainers().forEach(container => {
      container.scrollTop = 0;
    });
  }, 0);
}

注意：所有方案中使用setTimeout是为了确保Angular变更检测完成、视图更新后再执行滚动操作，避免因DOM未更新导致滚动失效。

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