Angular 12中如何实现博客组件重新打开时滚动到顶部？

下面提供几种实用的实现方案，根据你的组件显示/隐藏的场景选择：

场景1：组件通过*ngIf/[hidden]控制显示（路由未切换） #

这种情况下，组件重新显示时会触发ngOnInit或ngAfterViewInit钩子，直接在钩子中重置滚动位置即可：

方案1-1：操作组件内的滚动容器 #

如果滚动区域是组件内部的容器（而非整个窗口），先给容器添加模板引用变量：

<!-- 博客组件模板 -->
<div #blogScrollContainer class="blog-container" style="overflow-y: auto; height: 500px;">
  <!-- 博客内容 -->
</div>

然后在组件类中获取容器元素，在初始化钩子中重置滚动位置：

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

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  @ViewChild('blogScrollContainer') blogScrollContainer!: ElementRef;

  ngOnInit(): void {
    // 重置滚动到顶部
    this.blogScrollContainer.nativeElement.scrollTop = 0;
  }

  // 或者用ngAfterViewInit，确保DOM已渲染完成
  ngAfterViewInit(): void {
    this.blogScrollContainer.nativeElement.scrollTop = 0;
  }
}

方案1-2：操作整个窗口的滚动 #

如果滚动的是整个浏览器窗口，直接在钩子中调用window.scrollTo：

ngOnInit(): void {
  // 直接跳转到顶部
  window.scrollTo(0, 0);
  // 如需平滑滚动：
  // window.scrollTo({ top: 0, behavior: 'smooth' });
}

场景2：组件通过路由切换显示（路由跳转后重建组件） #

这种情况下可以监听路由导航结束事件，在每次导航到博客组件时重置滚动位置：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 重置窗口滚动到顶部
      window.scrollTo(0, 0);
      // 如果是组件内容器，同样用ViewChild获取后设置scrollTop
    });
  }
}

额外提示 #

• 如果组件是被缓存的（比如用RouteReuseStrategy），ngOnInit不会重复触发，这时可以监听组件的activate事件，或者在组件被激活的回调中执行滚动重置。
• 测试时注意确保滚动容器的DOM已经渲染完成，避免ElementRef获取不到元素的情况，优先用ngAfterViewInit处理组件内容器的滚动。

内容的提问来源于stack exchange，提问作者Josué Orozco