[Angular] 페이지 로드 anchor scroll 처리

url#scrollPoint 로 이동했을때 페이지 로드 시
scrollPoint영역으로 스크롤되도록 만들고 싶었다

---

 

*ngIf가 많은 페이지라 페이지 로드 후 스크롤을 이동시켜야 하는데 시점을 잡기가 어려웠다.

// test.component.html

<!-- 생략 -->
<div id="scrollPoint"></div>
<!-- 생략 -->

 

angular lifecycle hook 중 ngAfterViewInit를 사용했다.

그럼에도 dom에 그려지는 시간이 좀 걸리는 지 스크롤이 제대로 이동하지않아

setTimeout을 걸었다.

 

돌아가긴하지만 아쉬운 코드.

// test.component.ts

// ngAfterViewInit 사용
ngAfterViewInit() {
  this.route.fragment.subscribe((fragment: string) => {
    if (fragment) {
      setTimeout(() => {
        const elem = document.getElementById(fragment).offsetTop;
        window.scrollTo({ top: elem, behavior: 'smooth' });
      }, 1000);
    }
  });
}