CSS의 scroll-behavior 속성은 앵커 링크 클릭이나 자바스크립트 호출 등으로 페이지 내 이동이 발생할 때 스크롤이 어떻게 동작할지를 지정하는 속성입니다. 이 속성을 활용하면 별도의 JavaScript 없이도 순간 이동 대신 부드럽게 화면이 이동하는 스무스 스크롤(Smooth Scrolling) 효과를 손쉽게 구현할 수 있습니다.
scroll-behavior 속성 값
scroll-behavior 속성에 사용할 수 있는 값은 다음과 같습니다.
scroll-behavior: auto | smooth | initial | inherit;
- auto – 기본값입니다. 브라우저의 기본 스크롤 동작을 따르며, 즉시 해당 위치로 이동합니다.
- smooth – 스크롤 위치로 부드럽게 애니메이션되며 이동합니다.
- initial – 속성을 기본값(auto)으로 초기화합니다.
- inherit – 부모 요소의 scroll-behavior 값을 상속받습니다.
구현 예제
아래 예제는 html 요소에 scroll-behavior: smooth;를 적용하여, 섹션 사이를 이동하는 앵커 링크 클릭 시 부드러운 스크롤 효과가 나타나도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#area1 {
height: 400px;
background-color: red;
}
#area2 {
height: 600px;
background-color: orange;
}
#area3 {
height: 550px;
background-color: magenta;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="main" id="area1">
<h2>Section 1</h2>
<a href="#area2">Reach Section 2</a>
</div>
<div class="main" id="area2">
<h2>Section 2</h2>
<a href="#area3">Reach Section 3</a>
</div>
<div class="main" id="area3">
<h2>Section 3</h2>
<a href="#area1">Reach Section 1</a>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 빨강(Section 1), 주황(Section 2), 마젠타(Section 3) 색상의 세 개 영역이 세로로 배치된 페이지가 나타납니다.
먼저 "Reach Section 2" 링크를 클릭해 보겠습니다.
이어서 "Reach Section 3" 링크를 클릭하면, 화면이 순간적으로 이동하지 않고 부드럽게 스크롤되면서 Section 3으로 이동하는 것을 확인할 수 있습니다.
정리
scroll-behavior 속성은 html 요소뿐 아니라 특정 컨테이너에도 적용할 수 있으며, 한 줄의 CSS만으로 사용자 경험을 크게 향상시킬 수 있는 유용한 속성입니다. 다만, 사용자의 접근성 설정(prefers-reduced-motion)을 존중하는 것이 좋으며, 필요하다면 미디어 쿼리와 함께 활용하는 것도 고려해 보세요.