웹 페이지가 길어지면 독자가 다시 맨 위로 이동하기 번거로울 수 있습니다. 이럴 때 '맨 위로(Scroll to Top)' 버튼을 추가하면 사용자 경험이 크게 향상됩니다. jQuery의 animate() 메서드를 사용하면 클릭 한 번으로 페이지 상단으로 부드럽게 스크롤되는 효과를 간단히 구현할 수 있습니다.
핵심 원리
jQuery에서는 $("html, body") 요소를 선택한 뒤 animate() 메서드에 { scrollTop: 0 } 옵션을 전달합니다. 이렇게 하면 스크롤 위치가 0, 즉 페이지 최상단으로 애니메이션과 함께 이동합니다. 두 번째 인수인 "slow"는 스크롤 속도를 지정하며, 밀리초 단위의 숫자(예: 800)로도 설정할 수 있습니다.
전체 예제 코드
아래는 페이지 하단의 'Scroll up' 링크를 클릭하면 맨 위로 스크롤되는 완전한 예제입니다.
<html>
<body>
<script>
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
<h3>TOP OF PAGE</h3>
<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.<br>
This is demo text.
<br>
<h3>BOTTOM OF PAGE</h3>
<a href="#">Scroll up</a>
</body>
</html>코드 설명
$("a").click(function() {...}): 페이지 내 모든 <a> 태그에 클릭 이벤트를 바인딩합니다. 실무에서는#scrollTop같은 고유 ID나 클래스를 지정해 특정 버튼에만 적용하는 것이 좋습니다..animate({ scrollTop: 0 }, "slow"): html과 body 요소의 스크롤 위치를 0으로 부드럽게 애니메이션 처리합니다.return false;:href="#"링크의 기본 동작(페이지 새로고침 또는 URL 해시 변경)을 막아 줍니다.
순수 JavaScript로 구현하기
jQuery 없이도 최신 브라우저에서는 window.scrollTo() 메서드 하나로 동일한 효과를 낼 수 있습니다.
document.querySelector("#scrollUpBtn").addEventListener("click", function(e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
});behavior: "smooth" 옵션은 CSS처럼 부드러운 스크롤 애니메이션을 제공하며, 별도의 라이브러리 없이 가볍게 구현할 수 있다는 장점이 있습니다.
마무리
페이지 상단으로 스크롤하는 기능은 몇 줄의 코드만으로 구현할 수 있지만, 긴 콘텐츠를 다루는 웹사이트에서는 필수적인 UX 요소입니다. jQuery 프로젝트라면 animate() 방식을, 의존성을 줄이고 싶다면 네이티브 JavaScript의 scrollTo() 방식을 활용해 보세요.