웹 페이지가 길어지면 사용자가 다시 페이지 상단으로 이동하는 것이 번거로울 수 있습니다. 이때 화면 우측 하단에 나타나는 '맨 위로(Top)' 버튼을 추가하면 클릭 한 번으로 최상단으로 이동할 수 있어 사용자 경험이 크게 향상됩니다.
맨 위로 스크롤 버튼 예제
다음은 CSS와 간단한 JavaScript를 활용해 '맨 위로 스크롤' 버튼을 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
height: 120vh; /*스크롤바 생성용*/
}
div p {
font-size: 32px;
}
.topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 1;
font-size: 24px;
border: none;
outline: none;
background-color: rgb(90, 23, 129);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
.topBtn:hover {
background-color: rgb(75, 15, 145);
}
</style>
</head>
<body>
<button class="topBtn">Top</button>
<h1>Scroll to top button example</h1>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae sit, voluptatem minima quibusdam facere hic eum excepturi ex eius, accusamus cum. Iusto quibusdam quo alias laboriosam, debitis natus vero. Accusantium iusto rerum quisquam enim porro! Animi reiciendis quidem esse veritatis quis excepturi mollitia alias, odio error at temporibus deleniti placeat dignissimos id? Suscipit autem incidunt ad sit soluta natus beatae eveniet eaque id. Atque vitae debitis neque assumenda
incidunt iste ut consequuntur cupiditate inventore, eveniet quo adipisci natus blanditiis illum facilis, eius harum cumque enim pariatur magnam sapiente perspiciatis numquam! Sapiente, molestias quaerat. Numquam laborum explicabo quam sapiente dicta aliquam.</p>
</div>
<script>
var topButton = document.querySelector(".topBtn");
topButton.addEventListener("click", topScroll);
window.onscroll = function() {
scrollBtnShow();
};
function scrollBtnShow() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
topButton.style.display = "block";
}
else {
topButton.style.display = "none";
}
}
function topScroll() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 표시됩니다.
페이지를 아래로 스크롤하면 화면 우측 하단에 맨 위로 버튼이 다음과 같이 나타납니다.
코드 핵심 설명
- 버튼 고정 위치(.topBtn):
position: fixed속성을 사용해 버튼을 화면 우측 하단(bottom: 20px; right: 30px;)에 고정하고, 기본 상태는display: none으로 설정하여 숨겨둡니다. - 스크롤 감지(scrollBtnShow):
window.onscroll이벤트에서scrollTop값이 20px을 초과하면 버튼을 표시(display: block)하고, 그렇지 않으면 다시 숨깁니다. - 클릭 시 동작(topScroll): 버튼을 클릭하면
document.body.scrollTop과document.documentElement.scrollTop을 0으로 설정하여 페이지 최상단으로 즉시 이동합니다.
이처럼 몇 줄의 CSS와 JavaScript만으로도 긴 웹 페이지에서 사용자 편의성을 높여 주는 '맨 위로' 버튼을 손쉽게 구현할 수 있습니다.