아래처럼 html에 scroll-behavior 속성을 smooth로 설정하면 앵커(#으로 시작하는 링크)를 클릭해 이동할 때 부드럽게 이동하게 된다.
참고로 그 밑에 scroll-padding-top: 50px;는 이렇게 앵커 클릭으로 이동할 때 목표지점에 딱 붙에 스크롤하지 말고 50px을 더 스크롤하라는 뜻이다. 해 보면 무슨 말인지 쉽게 알 수 있을 것이다.
html {
scroll-behavior: smooth;
scroll-padding-top: 50px;
}
댓글 남기기