플로팅 배너에 탑 버튼 추가하기 (탑 버튼 응용, 고급)

카카오톡 상담, 전화상담 플로팅 배너에 이어 탑 버튼(상단 이동 스크롤 버튼)을 추가할 수 있습니다. 탑 버튼은 마우스 휠 스크롤 시 나타납니다.

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

아래 애니메이션과 같이 기본 플로팅 배너(카톡상담, 전화상담)를 추가하려면 먼저 다음 도움말을 참조하세요.

플로팅 배너 만들기 (고급 코드)



교육자료

탑 버튼 샘플 코드 및 이미지 소스를 다운로드할 수 있습니다.

파일 크기 및 구성요소 : 19Kb, ZIP 파일

다운로드


1단계, 이미지 자료실(게시판) 만들기

게시판에 탑 버튼 이미지를 업로드합니다. 업로드한 이미지의 주소(URL)를 복사해 활용할 수 있습니다. (기존에 사용하던 자료실 게시판이 있는 경우 이 단계는 건너뜁니다.)

  1. 이미지 자료실로 활용할 게시판을 추가하고, 이미지 주소를 복사합니다. 게시판 활용방법
  2. 복사한 이미지 주소는 메모장에 보관해둡니다.


2단계, SEO 헤더설정 메뉴로 이동하기

  1. 관리자 메뉴에 접속합니다.
  2. 왼쪽 관리 메뉴에서 [환경설정 - SEO, 헤더설정]을 클릭합니다.
  3. 마우스 휠을 스크롤하여 하단 Footer Code 항목으로 이동합니다.


3단계, 탑 버튼 스타일 붙여넣기

다음 스타일 코드를 복사해, <style>과 </style> 사이에 붙여넣습니다.

/* PC 탑 버튼 */
#scrollTopPc {
  display: none;
  position: fixed;
  top: 280px; /* 윗쪽 끝에서부터의 거리 */
  right: 50%;
  margin-right: -683px; /* 가운데를 기준으로 오른쪽 거리 */
  cursor: pointer;
  z-index: 99;
}
/* Mobile 탑 버튼 */
#scrollTopMob {
  position: fixed;
  bottom: 30px; /* 아랫쪽 끝에서부터의 거리 */
  right: 15px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}


4단계, 탑 버튼 표시하기

탑 버튼을 페이지에 표시하고, 크기를 수정합니다.

<!-- PC 버튼 -->
<div onclick="topFunction()" id="scrollTopPc" class="hidden-md hidden-sm hidden-xs">
    <img src="버튼 이미지 주소" width="76px" height="76px">
</div>
<!-- 모바일 버튼 -->
<div onclick="topFunction()" id="scrollTopMob" class="hidden-lg">
    <img src="버튼 이미지 주소" width="50px" height="50px">
</div>

1) PC 탑 버튼 수정하기
  1. 버튼 이미지 주소 : 탑 버튼 이미지 주소(URL)를 추가합니다.
  2. 버튼 크기 : 너비(width)와 높이(height)를 수정합니다.


2) 모바일 탑 버튼 수정하기
  1. 버튼 이미지 주소 : 모바일 탑 버튼 이미지 주소(URL)를 입력합니다.
  2. 버튼 크기 : 너비(width)와 높이(height)를 입력합니다.


5단계, 자바스크립트 코드 붙여넣기

  1. 다음 자바스크립트 코드를 복사해 Footer Code 최하단에 붙여넣습니다.
    주의 : 기존 탑 버튼 스크립트가 있다면 반드시 삭제해주세요.

     <!-- 탑 버튼 스크립트 -->
     <script>
        window.onscroll = function() {scrollFunction()};
     
        function scrollFunction() {
           if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
              document.getElementById("scrollTopPc").style.display = "block";
           } else {
              document.getElementById("scrollTopPc").style.display = "none";
           }
        }
     
        function topFunction() {
           $('html,body').animate({ scrollTop: 0 }, 500);
        }
     </script>
    
  2. 저장을 클릭해 작업한 코드들을 사이트에 적용합니다.
    참고 : 저장하기 전 다운로드한 최종 탑 버튼 코드를 참조해 비교/확인할 수 있습니다.


6단계, 상품 상세페이지 메뉴 예외처리

모바일 상품 상세페이지에서 하단 구매하기 버튼과 탑 버튼이 겹칠 수 있습니다. 다음 도움말을 참조해 상품 상세페이지 메뉴에서만 위치가 변경되도록 예외처리합니다. 이 작업은 디자인 모드에서 진행합니다.

  1. 디자인 모드에 접속합니다.
  2. 왼쪽 상단 메뉴 관리를 클릭합니다.
  3. 글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.
  4. 왼쪽 상단 위젯 추가버튼을 클릭합니다.
  5. 코드 위젯을 클릭합니다.

  6. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  7. 코드 설정을 클릭합니다. 위젯 설정 열기
  8. 다음 코드를 복사해, 기존 코드에 코드 이어서 붙여넣습니다.
    주의 : 기존 플로팅 배너가 있는 경우 버튼들이 겹치지 않도록 각 bottom 위치를 변경해주셔야 합니다.

     #scrollTopMob {bottom: 80px!important;}
    
  9. 저장 버튼을 클릭합니다.


(선택 사항) 7단계, 통합검색 메뉴 예외처리

필요하신 경우 통합검색 메뉴에서 탑 버튼이 표시되지 않도록 예외처리합니다.

  1. 왼쪽 상단 메뉴 관리를 클릭합니다.
  2. 글로벌 메뉴에서 통합검색 메뉴를 클릭합니다.
  3. 왼쪽 상단 위젯 추가버튼을 클릭합니다.
  4. 코드 위젯을 클릭합니다.

  5. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 코드 설정을 엽니다. 위젯 설정 열기
  7. 다음 코드를 복사하고 붙여넣습니다.

     #scrollTopPc {display: none!important;}
     #scrollTopMob {display: none!important;}
    


(선택 사항) 8단계, 장바구니, 마이페이지, 로그인/가입하기 메뉴 예외처리

필요하신 경우 장바구니 메뉴, 마이페이지 메뉴, 로그인/가입하기 메뉴에도 탑 버튼이 표시되지 않도록 예외 처리합니다. 위 통합검색 메뉴에 사용된 코드를 복사해, 같은 방법으로 나머지 메뉴들도 예외 처리합니다.

참고 : 위젯 복사 기능을 활용하시면 더욱 빠르고 간편하게 작업하실 수 있습니다. 위젯 복제 방법


9단계, 작동여부 확인하기

  1. 디자인 모드 오른쪽 상단 미리보기 클릭합니다.
  2. PC 및 모바일 브라우저에서 탑 버튼이 작동하는지 확인합니다.


10단계, 웹에 게시하기

탑 버튼이 정상적으로 작동한다면 디자인 모드 오른쪽 상단 게시하기를 클릭해 실제 사이트에 적용합니다.

사업자등록번호 : 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.