상단 이동 스크롤 버튼 만들기 (기본 탑 버튼)

HTML, CSS, 자바스크립트 코드를 사용해 클릭 시 페이지 상단으로 이동하는 상단 이동 스크롤 버튼을 만들 수 있습니다. 적용방법은 다음과 같습니다.

주의 : 본 튜토리얼에서 제공하는 소스 코드를 사용자 임의로 변경한 부분에 대해서는 기술 및 고객지원이 불가합니다.



1단계, 소스 코드 복사하기

다음의 상단 이동 스크롤 버튼 소스 코드를 복사합니다.  (단축키 : Ctrl + C)

<script>
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
    var $element = matchMedia("screen and (min-width: 786px)").matches ? document.getElementById("scrollTopBtn") : document.getElementById("scrollTopBtnMob");
    $element.style.display = (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) ? 'block' : 'none';
    }
    
    function topFunction() {
        $('html,body').animate({ scrollTop: 0 }, 500);
    }
</script>
    
<style>
/* PC 탑 버튼 */
#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    border: 1px;
    border-style: solid;
    border-color: rgba(77,77,77,0.1);
    outline: none;
    background-color: #212121;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    padding: 25px 29px;
    border-radius: 1px;
}

/* PC 탑 버튼 Hover */
#scrollTopBtn:hover {
  background-color: #47b9e4;
    border: 1px;
    border-style: solid; 
    border-color: rgba(77,77,77,0.1);
}

/* 모바일 탑 버튼 */
#scrollTopBtnMob {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    border: 1px;
    border-style: solid;
    border-color: rgba(77,77,77,0.1);
    outline: none;
    background-color: #ff1100;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    padding: 25px 29px;
    border-radius: 1px;
}

/* 모바일 탑 버튼 Hover */
#scrollTopBtnMob:hover {
  background-color: #47b9e4;
    border: 1px;
    border-style: solid; 
    border-color: rgba(77,77,77,0.1);
}
</style>

<button onclick="topFunction()" id="scrollTopBtn" title="Go to top">PC Top 버튼</button>
<button onclick="topFunction()" id="scrollTopBtnMob" title="Go to top">모바일 Top 버튼</button>


2단계, 소스 코드 붙여넣기

  1. 관리자 메뉴에 접속합니다.
  2. 왼쪽 관리 메뉴에서 [환경설정 - SEO, 헤더설정]을 클릭합니다.
  3. 하단 Footer Code 항목으로 마우스 스크롤을 내려 이동합니다.
  4. Footer Code 작성란에 위 1단계에서 복사한 코드를 붙여넣습니다. (단축키 : Ctrl + V)



  5. 저장 버튼을 눌러줍니다.
    주의 : 저장 버튼은 누르는 즉시 사이트에 적용됩니다. 나중에 적용하려면 이 항목은 건너뜁니다.


(선택 사항) 3단계, 버튼 위치 및 디자인 수정하기

  1. 버튼은 PC 버전, 모바일 버전으로 다르게 제작할 수 있습니다. 다음 주석을 참조해 기본 탑 버튼과 Hover 탑 버튼 코드를 수정합니다. 롤오버(Hover) 효과란?
    참고 : rgba 색상값을 수정해 색상을 투명하게 처리할 수 있습니다. rgb는 색상, a는 투명도를 의미합니다. 0.1은 10%를 의미합니다.

    /* PC 탑 버튼 */
        #scrollTopBtn {
            display: none;
            position: fixed;
            bottom: 20px; /* 버튼 위치 : 페이지 최하단 끝으로부터 거리 */
            right: 20px; /* 버튼 위치 : 페이지 최우측 끝으로부터의 거리 */
            z-index: 999;
            border: 1px; /* 버튼 테두리 두께 */
            border-style: solid;
            border-color: rgba(77,77,77,0.1); /* 버튼 테두리 색상 */
            outline: none;
            background-color: #212121; /* 버튼 배경색 */
            color: #ffffff; /* 버튼 텍스트 색상 */
            font-size: 16px; /* 버튼 텍스트 크기 */
            font-weight: bold; /* 버튼 텍스트 두께 */
            cursor: pointer;
            padding: 25px 29px; /* 버튼 안쪽 여백, 좌측: 상하 여백, 우측: 좌우 여백 */
            border-radius: 1px; /* 버튼 라운딩 */
        }
        
        /* PC 탑 버튼 Hover */
        #scrollTopBtn:hover {
          background-color: #47b9e4; /* Hover 시 버튼 배경색 */
            border: 1px; /* Hover 시 버튼 테두리 두께 */
            border-style: solid;
            border-color: rgba(77,77,77,0.1); /* Hover 시 테두리 색상 */
        }
        
        /* 모바일 탑 버튼 */
        #scrollTopBtnMob {
            display: none;
            position: fixed;
            bottom: 20px; /* 버튼 위치 : 페이지 최하단 끝으로부터 거리 */
            right: 20px; /* 버튼 위치 : 페이지 최우측 끝으로부터의 거리 */
            z-index: 999;
            border: 1px; /* 버튼 테두리 두께 */
            border-style: solid;
            border-color: rgba(77,77,77,0.1); /* 버튼 테두리 색상 */
            outline: none;
            background-color: #ff1100; /* 버튼 배경색 */
            color: #ffffff; /* 버튼 텍스트 색상 */
            font-size: 16px; /* 버튼 텍스트 크기 */
            font-weight: bold; /* 버튼 텍스트 두께 */
            cursor: pointer;
            padding: 25px 29px; /* 버튼 안쪽 여백, 좌측: 상하 여백, 우측: 좌우 여백 */
            border-radius: 1px; /* 버튼 라운딩 */
        }
        
        /* 모바일 탑 버튼 Hover */
        #scrollTopBtnMob:hover {
          background-color: #47b9e4; /* Hover 시 버튼 배경색 */
            border: 1px; /* Hover 시 버튼 테두리 두께 */
            border-style: solid; 
            border-color: rgba(77,77,77,0.1); /* Hover 시 테두리 색상 */
        }
  2. 수정 마쳤다면 다시 저장 버튼을 눌러 반영합니다.


4단계, 버튼 테스트

상단 이동 스크롤 버튼이 정상적으로 작동하는지 확인합니다.

PC 버전 테스트
  1. 새 브라우저 탭으로 사이트에 접속합니다.
  2. 마우스 스크롤을 아래로 내려봅니다.
  3. 버튼이 의도한 디자인으로, 원하는 위치에 나타나는지 확인합니다.
  4. 버튼을 클릭해 페이지 상단으로 이동하는지 확인합니다.
  5. (필요한 경우) 위 3단계로 돌아가 코드를 수정합니다.

모바일 버전 테스트
  1. 브라우저 가로 크기를 최대로 줄이면 사이트가 모바일 버전으로 변경됩니다.
  2. 마우스 스크롤을 아래로 내려봅니다.
  3. 버튼이 의도한 디자인으로, 원하는 위치에 나타나는지 확인합니다.
  4. 버튼을 클릭해 페이지 상단으로 이동하는지 확인합니다.
  5. (필요한 경우) 위 3단계로 돌아가 코드를 수정합니다.

사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved. 


고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호

고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호


사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved.