특정 위치로 스크롤을 이동시키는 액션을 부드러운 애니메이션과 함께 처리하는 효과를 '스무스 스크롤'이라고 부릅니다. 이를 구현하는 방법에는 여러가지가 있지만, 최근에는 CSS로도 쉽게 구현이 가능해져 별도의 자바스크립트 사용은 필요가 없기도 합니다. 다만 보다 세부적인 위치 또는 형태의 조정을 위해서는 자바스크립트의 사용이 필요한데 이 때 활용할 수 있는 코드를 공유드리고자 합니다. 다만 자바스크립트 외에 제이쿼리로도 자주 구현되는 내용이니 이 부분도 참고하시기 바랍니다.
### JavaScript에서 부드러운 스크롤 애니메이션 코딩하기
부드러운 스크롤 애니메이션은 웹페이지의 다른 섹션으로 이동할 때 매끄러운 전환을 제공하여 사용자 경험을 향상시키는 인기 있는 기술입니다. 타겟 요소로 갑자기 점프하는 대신 부드러운 스크롤은 사용자의 시야를 원하는 위치로 부드럽게 안내합니다. 이 블로그 포스트에서는 JavaScript를 사용하여 부드러운 스크롤 애니메이션을 구현하는 방법을 살펴보겠습니다. 제공된 코드를 통해 각 함수가 어떻게 작동하는지 설명하겠습니다.
#### HTML 구조 설정
JavaScript로 들어가기 전에, 부드러운 스크롤을 시연하기 위해 간단한 HTML 구조를 설정해보겠습니다. 몇 가지 섹션과 이 섹션으로 연결되는 내비게이션 메뉴를 만들겠습니다.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부드러운 스크롤 애니메이션</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 15px 0;
z-index: 1000;
}
header a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
section {
height: 100vh;
padding-top: 60px;
text-align: center;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
padding: 10px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<a href="javascript:scrollToTarget()">타겟으로 이동</a>
<a href="javascript:scrollToTargetAdjusted()">타겟으로 이동 (조정됨)</a>
<a href="javascript:backToTop()">맨 위로</a>
</header>
<section id="section1">섹션 1</section>
<section id="targetElement">타겟 섹션</section>
<section id="section3">섹션 3</section>
<div class="back-to-top" onclick="backToTop()">맨 위로</div>
<script src="script.js"></script>
</body>
</html>
```
#### 부드러운 스크롤을 위한 JavaScript
이제 부드러운 스크롤을 가능하게 하는 JavaScript 코드를 살펴보겠습니다. 이 코드는 `scrollToTarget`, `scrollToTargetAdjusted`, `backToTop` 세 가지 함수를 제공합니다.
```javascript
// script.js
function scrollToTarget() {
var element = document.getElementById('targetElement');
element.scrollIntoView({
block: "start",
behavior: "smooth",
});
}
function scrollToTargetAdjusted() {
var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
}
function backToTop() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
```
#### 설명
1. **scrollToTarget()**: 이 함수는 타겟 요소로 부드럽게 스크롤합니다. `scrollIntoView` 메서드를 사용하여 타겟 요소가 뷰포트에 들어오도록 합니다.
```javascript
function scrollToTarget() {
var element = document.getElementById('targetElement');
element.scrollIntoView({
block: "start",
behavior: "smooth",
});
}
```
- `element.scrollIntoView()`: 이 메서드는 페이지를 스크롤하여 타겟 요소가 보이도록 합니다.
- `block: "start"`: 타겟 요소의 상단을 뷰포트의 상단과 정렬합니다.
- `behavior: "smooth"`: 스크롤 동작이 부드럽게 이루어지도록 합니다.
2. **scrollToTargetAdjusted()**: 이 함수는 고정 헤더 오프셋을 고려하여 타겟 요소로 스크롤합니다. 고정 헤더가 뷰포트의 일부를 덮는 경우 유용합니다.
```javascript
function scrollToTargetAdjusted() {
var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
}
```
- `element.getBoundingClientRect().top`: 타겟 요소가 뷰포트의 상단에서부터 얼마나 떨어져 있는지를 가져옵니다.
- `window.pageYOffset`: 문서가 현재 수직으로 스크롤된 픽셀 수입니다.
- `headerOffset`: 고정 헤더의 높이입니다.
- `window.scrollTo()`: 계산된 위치로 부드럽게 스크롤합니다.
3. **backToTop()**: 이 함수는 페이지 맨 위로 부드럽게 스크롤합니다.
```javascript
function backToTop() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
```
- `top: 0`: 페이지의 맨 위로 스크롤합니다.
- `behavior: "smooth"`: 스크롤 동작이 부드럽게 이루어지도록 합니다.
#### 결론
JavaScript에서 부드러운 스크롤 애니메이션을 구현하는 것은 웹사이트에서 사용자 경험을 향상시키는 간단하지만 효과적인 방법입니다. `scrollIntoView`와 `scrollTo` 메서드를 사용하여 부드러운 전환을 만들 수 있으며, 이를 통해 내비게이션이 더욱 직관적이고 시각적으로 매력적으로 만듭니다. 코드를 필요에 맞게 커스터마이즈하여 사용자에게 원활한 브라우징 경험을 제공해보세요. 코딩을 즐기세요!
'UX 개발 > UX - 스크롤 애니메이션' 카테고리의 다른 글
| 스크롤 애니메이션 활용 CSS 트랜스폼 효과 주기 (0) | 2024.07.03 |
|---|---|
| 스크롤 애니메이션 연습 - HTML 요소에 스크롤 애니메이션 주기 (0) | 2024.06.25 |
| 초간단한 스크롤 패럴랙스 애니메이션 구현하기 (CSS, JS) (0) | 2024.06.23 |
| CSS만으로 초간단한 패럴랙스 효과 만들기 (0) | 2024.06.23 |
| 간단한 스크롤 내비게이션 만들기 (CSS+JS) (0) | 2024.06.10 |
