Ionic Angular Scroll to Top 앵귤러 페이지 이동 시 스크롤 최상단 배치 예시 feat.smooth

<main
  #container
  class="flex w-screen h-screen overflow-x-hidden overflow-y-auto"
>
	<router-outlet (activate)="onActivate($event)"></router-outlet>
</main>

1.

activate

이벤트를 달아줍니다. 페이지가 이동할 때 마다 activate 되겠죠?

2. ViewChild 로 핸들링 하기 위해 #container 

 

 

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


onActivate(e: any) {
    this.containerRef.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
  }

3. scrollTo 메소드를 활영하여 해당 좌표로 이동합니다. top:0

4. behavior 옵션을 활용하여 smooth 하게 이동합니다.