긴 페이지를 끝까지 읽고 나면 다시 위로 올라가야 할 때가 많다. 이때 탑 버튼(맨 위로 돌아가기 버튼)이 있으면 마우스 휠을 한참 굴리거나 스크롤바를 끌어올리지 않고도 한 번의 클릭으로 페이지 상단으로 이동할 수 있다. 워드프레스에서 Divi 테마를 쓴다면 별도 플러그인 없이 테마 옵션만으로 이 버튼을 켤 수 있고, 다른 테마라도 간단한 앵커 링크나 짧은 코드로 직접 구현할 수 있다. 이 글에서는 탑 버튼이 무엇이고 왜 필요한지, Divi에서 켜는 방법, 그리고 테마와 무관하게 쓸 수 있는 표준 구현 방식을 정리한다.
탑 버튼이란 무엇이고 왜 필요한가
탑 버튼은 사용자가 페이지를 아래로 스크롤했을 때 화면 모서리(보통 우측 하단)에 나타나는 작은 화살표 버튼이다. 클릭하면 페이지 최상단으로 부드럽게 이동한다. 블로그 글, 제품 상세, 약관처럼 세로로 긴 페이지일수록 효과가 크다.
- 탐색 편의 — 메뉴나 검색이 상단에 있을 때, 한 번의 클릭으로 빠르게 되돌아갈 수 있다.
- 모바일 UX — 화면이 작아 스크롤이 길어지는 모바일에서 특히 체감 효과가 크다.
- 이탈 방지 — 페이지 끝에서 다음 행동(다른 글 보기, 구매 등)으로 자연스럽게 연결된다.
Divi 테마에서 탑 버튼 켜기
Divi에는 탑 버튼이 기본 기능으로 들어 있어 코드 없이 토글 하나로 켤 수 있다. 다만 설치 직후에는 꺼져 있으므로 직접 활성화해야 한다. 워드프레스 관리자에서 다음 경로로 들어간다.
- Divi > 테마 옵션(Theme Options) > 일반(General) 탭에서 Back To Top Button 항목을 켜고 변경사항을 저장한다.
- 또는 Divi > 테마 커스터마이저(Theme Customizer) > Advanced General Settings에서 같은 옵션을 토글로 켤 수 있다.
저장한 뒤 페이지를 아래로 스크롤하면 우측 하단에 탑 버튼이 나타난다. Divi 버전에 따라 메뉴 명칭이나 위치가 조금 다를 수 있으니, “테마 옵션”이나 “커스터마이저”의 일반 설정에서 Back To Top Button 항목을 찾으면 된다.
테마와 무관한 표준 구현 방법
Divi 같은 내장 기능이 없는 테마에서도 탑 버튼은 표준 HTML·CSS·JS로 직접 만들 수 있다. 아래 코드는 동작 원리를 보여 주는 예시 코드이며, 실제 적용 시에는 사이트 구조에 맞게 다듬어 쓰면 된다.
가장 간단한 방법 — 앵커 링크
페이지 최상단 요소에 id를 부여하고, 그 위치로 이동하는 링크를 두는 방식이다. 별도 스크립트 없이도 동작한다.
<!-- 페이지 맨 위 -->
<div id="top"></div>
<!-- 맨 위로 이동하는 링크 -->
<a href="#top">맨 위로</a>부드러운 스크롤과 자동 표시
스크롤을 부드럽게 하고, 일정 높이 이상 내려갔을 때만 버튼을 보이게 하려면 CSS의 scroll-behavior와 짧은 자바스크립트를 더한다.
/* CSS — 부드러운 스크롤 + 고정 버튼 */
html { scroll-behavior: smooth; }
#to-top {
position: fixed;
right: 24px;
bottom: 24px;
display: none; /* 처음엔 숨김 */
}// JS — 300px 이상 스크롤되면 버튼 표시, 클릭 시 맨 위로
const btn = document.getElementById('to-top');
window.addEventListener('scroll', () => {
btn.style.display = window.scrollY > 300 ? 'block' : 'none';
});
btn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});window.scrollTo의 behavior: 'smooth'와 CSS scroll-behavior: smooth는 현대 브라우저에서 널리 지원되는 표준 기능이다. 위 예시처럼 표시 기준 높이(여기서는 300px)나 버튼 위치는 자유롭게 조정할 수 있다.
정리
탑 버튼은 긴 페이지의 탐색을 한 번의 클릭으로 줄여 주는 작지만 효과적인 UX 요소다. Divi 사용자는 테마 옵션의 Back To Top Button 토글만 켜면 코드 없이 바로 쓸 수 있고, 그 외 환경에서는 앵커 링크나 짧은 CSS·JS 스니펫으로 동일한 동작을 직접 구현할 수 있다. 참고로 누스쿨 사이트는 현재 Divi가 아닌 Elementor 기반으로 운영되고 있어, 이 글은 과거 Divi 사용 기록의 아카이브 차원에서 정리해 둔 것이다. Elementor에서도 위젯이나 같은 방식의 코드로 동일한 탑 버튼을 만들 수 있다.
💬 댓글 0