웹 페이지에서 맨위로 버튼 기능 삽입방법
2025. 7. 22. 21:15ㆍ생활정보
728x90
웹 페이지에서 버튼을 클릭했을 때 맨 위로 스크롤(페이지 이동)되는 기능을 구현하는 방법을 아래에 HTML + JavaScript 코드와 함께 설명해드릴게요.
✅ 1. HTML + CSS + JavaScript 소스 코드
html
복사편집
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>페이지 맨 위로 이동 버튼</title> <style> /* 버튼 스타일 */ #topButton { position: fixed; bottom: 30px; right: 30px; display: none; padding: 12px 18px; background-color: #007BFF; color: white; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-size: 14px; z-index: 999; } #topButton:hover { background-color: #0056b3; } body { height: 2000px; /* 예시용 스크롤 길이 */ padding: 20px; } </style> </head> <body> <h1>페이지 맨 위로 이동 테스트</h1> <p>스크롤을 내려보세요. 버튼이 나타납니다.</p> <!-- 맨 위로 이동 버튼 --> <button id="topButton" onclick="scrollToTop()">↑ 위로</button> <script> // 스크롤 시 버튼 보이기/숨기기 window.onscroll = function() { const btn = document.getElementById("topButton"); if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { btn.style.display = "block"; } else { btn.style.display = "none"; } }; // 스크롤 맨 위로 이동 함수 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } </script> </body> </html>
✅ 2. 실행 방법 (PC 기준)
- 메모장 또는 VSCode 등 텍스트 편집기를 엽니다.
- 위 코드를 복사해서 붙여넣습니다.
- scroll-top.html 같은 이름으로 저장할 때, 파일 형식은 반드시 .html로 지정합니다.
- 저장한 파일을 더블 클릭하거나 브라우저로 열기하면 페이지가 열립니다.
- 스크롤을 아래로 내리면 우측 하단에 ‘↑ 위로’ 버튼이 표시되고, 클릭 시 부드럽게 페이지 맨 위로 이동합니다.
✅ 추가 팁
- 모바일 대응: 버튼 크기를 vw 또는 rem 단위로 조정하면 더 유연하게 동작합니다.
- 아이콘 추가: Font Awesome 등을 사용하면 버튼에 화살표 아이콘을 꾸밀 수 있습니다.
728x90
'생활정보' 카테고리의 다른 글
| 블로그의 브랜드화에 대해 알아 보겠습니다. (13) | 2025.07.23 |
|---|---|
| 안경의 역사와 트랜드에 대해 알아 보고겠습니다. (0) | 2025.07.23 |
| 2025년 유행하는 여름원피스에 대해 (7) | 2025.07.22 |
| 고양이가 좋아하는 것과 싫어하는 것 요약 (0) | 2025.07.21 |
| 웹브라우저, 크롬, 익스플로러, 파이어폭스 등의 특장점에 대해 (1) | 2025.07.21 |