스크롤 이동시 오직 css만 사용하여 스크롤 애니메이션을 구현할 수 있는 scroll-behavior에 대하여 알아봅니다.



# CSS scroll-behavior 속성
웹페이지에서 스크롤을 원하는 위치로 이동하는 방법으로 자바스크립트를 사용하거나 href="#id"의 방법을 사용합니다. 이때 스크롤이 바로 이동하지 않고 부드럽게 이동하게 하려면 어떻게 할까요? 제이쿼리의 메소드를 사용하거나 아니면 타이머 함수등을 사용할 수 있습니다.

하지만 더 간단한 방법이 필요한 경우 css를 사용할 수 있는데요. 바로 scroll-behavior 속성입니다. 이 css 속성은 스크롤 이동을 자연스럽게 바꿀 수 있는 값으로 설정할 수 있죠.

scroll-behavior: [ auto | inherit | smooth ]


위와 같이 세 가지 값으로 설정할 수 있습니다. 여기서 애니메이션처럼 부드러운 효과는 바로 smooth 값으로 설정합니다.


! scroll-behavior 값 smooth를 사용하는 이유
가장 큰 장점은 자바스크립트의 사용을 최소화 할 수 있습니다. 즉 스크롤 위치 이동만 스크립트를 이용하고 나머지 애니메이션 구현 부분은 css 한 줄로 가능하다는 점이죠. 매우 편리하고 실용적입니다. 다만 IE, Edge의 경우 아직은 지원되지 않는다는 점입니다.



! CSS scroll-behavior 예제보기

그럼 간단한 예제를 만들어보고 어떻게 동작하는지 알아보겠습니다. 먼저 아래와 같이 링크를 하나 만들고 클릭할 경우 상단의 abc라고 적힌 위치로 이동하려고 합니다. 잘 보이도록 폰트 크기를 키웠습니다.
<div id="abc" style="margin-bottom: 300px; font-size: 40px;">
  abc
</div>

<a href="#abc" style="border: 1px solid; padding: 10px 20px;">Scroll</a>

이제 css를 스크롤이 있는 html 태그 위치에 적용합니다.
html {
  scroll-behavior: smooth;
}

여기까지 모든 과정이 끝났습니다. 과연 어떻게 동작하는지 다시 한 번 확인해보겠습니다. 아래의 구현된 모습에서 직접 Scroll이라는 버튼을 클릭해보세요. 클릭 후 자연스럽게 위로 이동할 것입니다.


abc
Scroll