[CSS] scroll-behavior로 부드러운 스크롤 구현하는 법

1. scroll-behavior: smooth – 단 1줄로 부드러운 스크롤 완성하기

사용자 경험을 높이기 위해 많이 사용되는 효과 중 하나가 부드러운 스크롤(smooth scroll)입니다.
과거에는 JavaScript나 jQuery를 통해 구현해야 했지만, 이제는 CSS 한 줄만으로도 가능합니다.

2. 기본 문법

html {
  scroll-behavior: smooth;
}

 

이 속성 하나만으로 같은 페이지 내의 앵커(anchor) 링크 클릭 시 부드럽게 이동하게 됩니다.

3. 예제: 내비게이션에서 섹션으로 스크롤

3-1. HTML 코드

<a href="#section2">섹션 2로 이동</a>

<div style="height: 1000px;"></div>

<section id="section2">
  <h2>여기가 섹션 2입니다</h2>
</section>

3-2. CSS 코드

html {
  scroll-behavior: smooth;
}

이제 <a href="#section2">를 클릭하면, 페이지가 자연스럽게 section2로 스르륵 스크롤됩니다.

 

해당 링크를 클릭하면 하단 섹션2로 부드럽게 이동됩니다.

 

4. 스크립트 없이 구현 가능한 UX 향상 효과

• 헤더 메뉴에서 특정 섹션으로 이동
• "맨 위로 가기" 버튼
• Table of Contents 같은 목차 클릭
• 단일 페이지 웹사이트에서 섹션 간 이동

5. 추가 팁

5-1. 스크롤 대상 제한

<div class="scroll-box">
  <a href="#item10">[10번째 항목으로 이동]</a>
  <div class="spacer"></div>
  <div id="item10">여기가 10번째 항목입니다!</div>
</div>

.scroll-box {
  overflow: auto;
  scroll-behavior: smooth;
  max-height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.spacer {
  height: 900px;
}

이렇게 하면 .scroll-box 안에서도 내부 요소로 부드럽게 이동 가능합니다.

html이 아닌 다른 영역 안에서도 가능합니다.

6. 주의할 점

• 일부 구형 브라우저(IE, 일부 Android 브라우저)는 지원하지 않음
• JavaScript로 수동 스크롤 제어 시 적용되지 않을 수 있음

7. 마무리 정리

• scroll-behavior: smooth는 간단하면서도 강력한 UX 개선 도구입니다.
• JS 없이 부드러운 내비게이션 가능
• 유지보수가 쉬운 CSS 기반 솔루션