RouterLink anchor scrolling. (fragment, anchorScrolling: enable)

routerLink 또는 navigateUrl 등으로 이동 시 "fragment"를 사용해 페이지 랜딩 후 선택한 컨텐츠로 자연스럽게 스크롤 이동할 수 있는 방법이 있다.

 

1. 컴포넌트 템플릿 안에서는 RouterLink, 컴포넌트 클래스 안에서는 Rouer에서 제공하는 navigationUrl을 사용한다.

 

2. RouterLink로 이동경로(path)를 설정, fragment 프로퍼티추가해준다. 그리고 fragment에 특정값을 넣어준다. (fragment="targetElement")

 

3. 스크롤로 이동하고자하는 요소에 id 값을 fragment와 동일하게 해준다. <div id="targetElement"></div>

 

4. root 모듈에 RouterModule.forRoot 메서드에 2번째 인자로 anchorScrolling='enable'를 객체형태로 넣어준다.

 

https://angular.io/api/router/InMemoryScrollingOptions#anchorScrolling