[HTML] 버튼 클릭 시 페이지 맨 위로 부드럽게 올라가는 법 (scroll behavior 활용)

---

💡 "맨 위로" 버튼을 눌렀을 때 부드럽게 스크롤되게 하고 싶다면?

블로그, 쇼핑몰, 랜딩 페이지를 보면 하단에 "맨 위로 올라가기" 버튼이 자주 있죠.
이때 페이지가 갑자기 위로 확 이동하지 않고,
부드럽게 올라가는 스크롤 효과를 주면 사용자 경험(UX)이 더 좋아집니다.
이 글에서는 scroll behavior와 window.scrollTo()를 활용한 구현 방법을 알려드립니다.

---

🛠️ 부드럽게 맨 위로 올라가기: 코드 예제와 설명

✅ 기본 예제 (scroll behavior: smooth)

<button onclick="scrollToTop()">맨 위로 가기</button>

<script>
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 부드러운 스크롤
    });
  }
</script>

---

🎯 포인트 설명

• window.scrollTo({ top: 0 }); 👉 위쪽 0 위치로 이동
• behavior: 'smooth' 👉 부드러운 스크롤 효과 적용
• behavior: 'auto' 👉 부드럽지 않고 즉시 이동 (기본값)

---

⚡ CSS로 scroll-behavior 설정하기 (전체 페이지 적용)

html {
  scroll-behavior: smooth;
}

✅ 이렇게 설정하면 a 태그의 href="#top" 같은 링크 이동도 부드럽게 됩니다.

---

🧩 참고: jQuery 없이도 쉽게 구현 가능

옛날에는 jQuery의 animate 함수를 많이 썼지만,
요즘은 Vanilla JavaScript + CSS만으로 충분합니다.

---

🏁 마무리 요약

목표	방법
버튼 클릭 시 부드럽게 위로 이동	window.scrollTo({ top: 0, behavior: 'smooth' }) 사용
전체 페이지 링크 이동도 부드럽게	html { scroll-behavior: smooth; }
즉시 이동하고 싶다면	behavior: 'auto' 사용

---

👉 다음 글 예고

[HTML] 버튼 클릭 시 팝업창 띄우는 방법 (window.open 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊