웹페이지를 탐색하다 보면 스크롤해야 할 내용이 점점 길어지는 경우가 많습니다. 이럴 때 원하는 위치로 빠르게 이동하고 싶다면 ‘페이지 상단 이동 버튼’을 활용하는 것이 매우 효과적입니다. 이 버튼을 클릭하면 페이지 최상단으로 부드럽게 스크롤되며, 사용자의 불편함을 줄여 보다 효율적인 탐색이 가능해집니다. 특히 긴 글을 읽거나 다양한 제품 목록을 살펴볼 때, 스크롤을 반복해야 하는 번거로움을 덜어주어 시간을 절약할 수 있습니다. 이러한 기능은 웹사이트의 편의성을 높이고, 사용자 경험을 한층 더 개선하는 중요한 요소로 자리 잡고 있습니다.
Table of Contents | 목차
HTML에 버튼 추가하기
HTML을 </body> 태그 바로 앞에 추가하세요
html
<button class="scroll-top">↑</button>
CSS로 버튼 스타일링하기
버튼을 화면의 원하는 위치에 고정하고, 디자인을 설정합니다:
css
.scroll-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #4B89DC;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
cursor: pointer;
display: none;
font-size: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
JavaScript로 스크롤 이벤트 처리하기
스크롤 위치에 따라 버튼을 표시하거나 숨기고, 버튼 클릭 시 상단으로 부드럽게 이동하도록 설정합니다:
javascript
<script>
const scrollBtn = document.querySelector('.scroll-top');
window.onscroll = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
};
scrollBtn.onclick = () => window.scrollTo({top: 0, behavior: 'smooth'});
</script>