코딩이야기

Scroll to top 버튼 구현 본문

KnowHows

Scroll to top 버튼 구현

기획자 비제이 2024. 7. 8. 13:30

스크롤이 생성될 경우, 오른쪽 구석에 화살표 모양의 아이콘이 등장, 
클릭시 최상단으로 올려주는 Scroll to top button이다. 

크게 css / javascript를 콜 하는 버튼 / javascript 이렇게 3구조로 나눠져 있으므로 
필요에 맞게 쓰레기 코드를 걷어내고, 필요한 부분만 취해서 사용하면 된다. 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll to Top Button</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* "Top" 버튼 스타일 */
        #topBtn {
            display: none; /* 기본적으로 숨김 */
            position: fixed; /* 스크롤과 상관없이 고정 위치 */
            bottom: 20px; /* 화면 아래에서 20px 위치 */
            right: 30px; /* 화면 오른쪽에서 30px 위치 */
            z-index: 99; /* 다른 요소보다 위에 위치 */
            width: 40px; /* 버튼 너비 */
            height: 40px; /* 버튼 높이 */
            border: none; /* 테두리 제거 */
            outline: none; /* 아웃라인 제거 */
            background-color: #2C2F33; /* 버튼 배경색 */
            color: white; /* 버튼 글자색 */
            cursor: pointer; /* 마우스 포인터 모양 변경 */
            border-radius: 50%; /* 원형 버튼 */
            display: flex; /* 플렉스 박스 사용 */
            align-items: center; /* 아이템 수직 중앙 정렬 */
            justify-content: center; /* 아이템 수평 중앙 정렬 */
        }

        #topBtn:hover {
            background-color: #555; /* 호버 시 배경색 */
        }

        /* 화살표 아이콘 스타일 */
        .arrow-up {
            width: 0; 
            height: 0; 
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 8px solid white;
            margin-bottom: 4px; /* 아이콘을 가운데로 맞추기 위해 약간의 여백 추가 */
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Scroll to Top Example</h1>
        <p>스크롤을 내려보세요.</p>
        <p style="margin-bottom: 2000px;">이 문장은 테스트용으로 길게 작성된 문장입니다. 계속 스크롤하여 'Top' 버튼이 나타나는지 확인하세요.</p>
    </div>

    <!-- Top 버튼 -->
    <button onclick="topFunction()" id="topBtn" title="Go to top">
        <div class="arrow-up"></div>
    </button>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 버튼 요소를 가져옴
        let topBtn = document.getElementById("topBtn");

        // 사용자가 페이지를 스크롤할 때 호출되는 함수
        window.onscroll = function() {
            scrollFunction();
        };

        // 스크롤 위치에 따라 버튼을 보이거나 숨김
        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                topBtn.style.display = "flex"; // 스크롤이 20px 이상이면 버튼을 표시
            } else {
                topBtn.style.display = "none"; // 스크롤이 20px 이하이면 버튼을 숨김
            }
        }

        // 버튼을 클릭하면 페이지 맨 위로 스크롤
        function topFunction() {
            document.body.scrollTop = 0; // For Safari
            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        }
    </script>
</body>
</html>

 

저작자표시 비영리 변경금지

'KnowHows' 카테고리의 다른 글

Follow 기획  (0) 2024.06.25
유저 차단 모드 기획시 , 기본적으로 처리해야할 내부 프로세스  (0) 2024.06.25
UUID(Universally Unique Identifier)  (0) 2024.06.25
댓글 구조 설계  (0) 2024.06.24
반응형에서 빠른 이미지 로딩을 위한 Tip  (0) 2024.06.24
'KnowHows' Related Articles more