Ionic angular router page changed scrollTop / 페이지 이동 시 최상단 고정 예시

<ion-content
    #content -> viewChild 선언
    id="main"
    style="width: 100%; height: 100%"
    [scrollEvents]="true"
    (ionScroll)="ionScroll($event)"
  >
    <!-- flex -->
    <div class="flex flex-col w-full h-full">
      <!-- header -->
      <app-header class="fixed z-40 w-full" (menu)="menu.open()" />
      <!-- content -->
      <router-outlet (activate)="onActivate($event)"></router-outlet> -> 페이지 이동 시 메소드 연결
      <!-- footer-->
      <app-footer class="z-10 w-full" />
    </div>
  </ion-content>

1. #content -> viewChild 를 활용하기 위해 선언합니다.

2. router-outlet (active) 액티브한 순간 시점을 잡아내기 위해 메소드를 연결합니다.

 

 

  @ViewChild(IonContent) content!: IonContent;
  
  
  onActivate(e: any) {
    this.content.scrollToTop();
  }

3. 페이지가 이동하는 순간 ViewChild 로 받은 현재의 페이지 스크롤을 최상단으로 이동시킵니다.