무엇을 도와드릴까요?

자주 묻는 질문 가이드

상단/하단 이동 스크롤 버튼 만들기 (코드, 고급)

주의: 아임웹에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 작동하지 않을 수 있습니다.

아임웹은 코드를 쓰지 않아도 다양한 웹사이트, 쇼핑몰을 제작할 수 있도록 고안된 웹 제작 도구입니다. 그렇다고 코드를 완전히 사용하지 못하는 건 아닙니다.

HTML, CSS, 자바스크립트를 사용하면 더 다양한 디자인이 가능하며, 아래의 애니메이션과 같은 상단/하단 이동 스크롤 버튼을 만들어 추가할 수도 있습니다.

이 도움말은 코드를 활용한 고급 도움말로 웹사이트 오른쪽 하단에 위로 또는 아래로 스크롤 버튼을 추가하는 방법을 설명합니다.

교육자료

아래의 다운로드 링크에 접속 후 Scroll_Top_Bottom_Button_Ver_2.0.zip 클릭해 파일을 내려받아 주세요. 압축 프로그램을 사용해 압축을 풀어야 사용할 수 있습니다. 버튼 이미지(PNG)는 있는 그대로 사용해도 되고, 내 사이트 디자인에 맞게 수정해 사용해도 무방합니다.

파일 이름: Scroll_Top_Bottom_Button_Ver_2.0.zip
파일 형식: ZIP 압축파일 (PNG, PSD)
파일 크기: 33KB (다운로드)

제작방법

1단계: 버튼 이미지 주소(URL) 획득하기

게시판에 상단/하단 이동 스크롤 버튼 제작에 필요한 이미지(PNG)를 모두 올리고, 해당 이미지의 URL 주소를 복사합니다.
참고: 게시판을 이미지 자료실로 활용하는 방법은 게시판을 이미지 자료실로 활용하기 도움말에서 상세히 알아볼 수 있습니다.
복사한 이미지 URL 주소는 3단계 3번 과정에서 사용되므로 메모장 등에 잘 작성해 둡니다.

2단계: 코드 복사 및 붙여넣기

상단/하단 이동 스크롤 버튼 코드를 붙여넣는 과정을 설명합니다.

내 사이트 관리자 페이지에 접속합니다. 접속방법
왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
마우스 휠 스크롤을 내려 Footer Code 항목으로 이동합니다.

아래의 소스 코드 전체를 복사하여, Footer Code 작성 칸에 붙여넣습니다.

<!-- 상단/하단 이동 스크롤 버튼 -->
<style>
/* PC TOP 버튼 */
#scrollTopPc {
    display: none;
    position: fixed;
    bottom: 64px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    cursor: pointer;
    z-index: 99;
}

/* 모바일 TOP 버튼 */
#scrollTopMob {
    display: none;
    position: fixed;
    bottom: 64px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    z-index: 99;
}

/* PC DOWN 버튼 */
#scrollDownPc {
    display: none;
    position: fixed;
    bottom: 20px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    cursor: pointer;
    z-index: 99;
}

/* 모바일 DOWN 버튼 */
#scrollDownMob {
    display: none;
    position: fixed;
    bottom: 20px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    z-index: 99;
}
</style>

<!-- PC TOP 버튼 HTML -->
<div onclick="topFunction()" id="scrollTopPc" class="hidden-md hidden-sm hidden-xs">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div> 
<!-- 모바일 TOP 버튼 HTML -->
<div onclick="topFunctionMob()" id="scrollTopMob" class="hidden-lg">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div>
<!-- PC DOWN 버튼 HTML -->
<div onclick="downFunction()" id="scrollDownPc" class="hidden-md hidden-sm hidden-xs">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div> 
<!-- 모바일 DOWN 버튼 HTML -->
<div onclick="downFunctionMob()" id="scrollDownMob" class="hidden-lg">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div>

<!-- 상단/하단 이동 스크롤 스크립트 -->
<script>
window.onscroll = function() { scrollFunction() };

function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        document.getElementById("scrollTopPc").style.display = "block";
        document.getElementById("scrollTopMob").style.display = "block";
        document.getElementById("scrollDownPc").style.display = "block";
        document.getElementById("scrollDownMob").style.display = "block";
    } else {
        document.getElementById("scrollTopPc").style.display = "none";
        document.getElementById("scrollTopMob").style.display = "none";
        document.getElementById("scrollDownPc").style.display = "none";
        document.getElementById("scrollDownMob").style.display = "none";
    }
}

// PC TOP 버튼 동작
function topFunction() {
    $('html,body').animate({ scrollTop: 0 }, 500);
}
// 모바일 TOP 버튼 동작
function topFunctionMob() {
    $('html,body').animate({ scrollTop: 0 }, 500);
}
// PC DOWN 버튼 동작
function downFunction() {
    $('html, body').animate({ scrollTop: $('#doz_footer').offset().top }, 500);
}
// 모바일 DOWN 버튼 동작
function downFunctionMob() {
    $('html, body').animate({ scrollTop: $('#doz_footer').offset().top }, 500);
}
</script>

3단계: 코드 수정하기

코드에 작성된 주석을 참고하여 내 사이트에 맞게 수정합니다.

중요: 코드를 수정한 후에는 반드시 저장 버튼을 클릭해야 수정사항이 반영됩니다.

1. TOP 버튼 위치 수정하기

PC와 모바일 브라우저에서 표시될 TOP 버튼의 위치를 수정합니다. bottom 과 right 속성 값을 변경하세요. 각 속성이 가진 의미는 주석을 참고할 수 있습니다. *숫자만 변경하세요.

/* PC TOP 버튼 */
#scrollTopPc {
    display: none;
    position: fixed;
    bottom: 64px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    cursor: pointer;
    z-index: 99;
}

/* 모바일 TOP 버튼 */
#scrollTopMob {
    display: none;
    position: fixed;
    bottom: 64px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    z-index: 99;
}

2. DOWN 버튼 위치 수정하기

PC와 모바일 브라우저에서 표시될 DOWN 버튼의 위치를 수정합니다. bottom 과 right 속성 값을 변경하세요. 각 속성이 가진 의미는 주석을 참고할 수 있습니다. *숫자만 변경하세요.

참고: DOWN 버튼을 사용하지 않는 경우, 이 코드는 삭제해도 됩니다.

/* PC DOWN 버튼 */
#scrollDownPc {
    display: none;
    position: fixed;
    bottom: 20px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    cursor: pointer;
    z-index: 99;
}

/* 모바일 DOWN 버튼 */
#scrollDownMob {
    display: none;
    position: fixed;
    bottom: 20px; /* 브라우저 아래쪽 끝에서부터의 거리 */
    right: 15px; /* 브라우저 오른쪽 끝에서부터의 거리 */
    z-index: 99;
}

3. TOP 버튼 HTML 수정하기

TOP 버튼 HTML 코드를 수정합니다.

코드에 작성된 이미지버튼주소 텍스트를 삭제하고, 위 1단계에서 메모해둔 TOP 버튼 이미지의 URL 주소를 작성합니다.
가로길이 와 세로길이 텍스트를 삭제하고, 픽셀 단위로 숫자를 입력해 버튼 이미지의 크기를 지정합니다.

<!-- PC TOP 버튼 HTML -->
<div onclick="topFunction()" id="scrollTopPc" class="hidden-md hidden-sm hidden-xs">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div> 
<!-- 모바일 TOP 버튼 HTML -->
<div onclick="topFunctionMob()" id="scrollTopMob" class="hidden-lg">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div>

4. DOWN 버튼 HTML 수정하기

DOWN 버튼 HTML 코드를 수정합니다.

코드에에 작성된 이미지버튼주소 텍스트를 삭제하고, 위 1단계에서 메모해둔 DOWN 버튼 이미지의 URL 주소를 작성합니다.
가로길이 와 세로길이 텍스트를 삭제하고, 픽셀 단위로 숫자를 입력해 버튼 이미지의 크기를 지정합니다.

<!-- PC DOWN 버튼 HTML -->
<div onclick="downFunction()" id="scrollDownPc" class="hidden-md hidden-sm hidden-xs">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div> 
<!-- 모바일 DOWN 버튼 HTML -->
<div onclick="downFunctionMob()" id="scrollDownMob" class="hidden-lg">
    <img src="버튼이미지주소" width="가로길이" height="세로길이">
</div>

4단계: 모바일 상품 상세페이지 예외처리하기

모바일 상품 상세페이지에서 페이지 하단의 구매하기 버튼과 상단/하단 이동 스크롤 버튼이 겹쳐서 표시될 수 있습니다.

따라서, 상품 상세페이지에서는 스크롤 버튼의 위치가 구매 버튼보다 조금 더 위로 올라가도록 예외처리 코드를 추가합니다.

설정방법

디자인 모드에 접속합니다. 접속방법
왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
글로벌 메뉴에서 상품 상세페이지 를 클릭합니다.
왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
코드 위젯을 클릭합니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

아래의 코드를 복사해 코드 설정 칸에 붙여넣습니다.

<style>
/* 상단, 하단 이동 스크롤 버튼 위로 올림 */
    #scrollTopMob {bottom: 114px !important;}
    #scrollDownMob {bottom: 70px !important;}
</style>

저장 버튼을 클릭해 적용합니다.

5단계: 동작여부 확인하기

디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
상단 또는 하단 이동 스크롤 버튼이 정상적으로 표시되고 동작하는지 확인합니다.
문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

추가 도움말

모바일 기기의 통합검색 메뉴에서 스크롤 버튼 감추기

스마트폰, 태블릿 같은 모바일 기기에서는 통합검색 메뉴에서 상단/하단 이동 스크롤 버튼이 표시되지 않도록 감출 수 있습니다.

설정방법

디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
글로벌 메뉴에서 통합검색 을 클릭합니다.
왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
코드 위젯을 클릭합니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
아래의 코드를 복사해 코드 설정 칸에 붙여넣습니다.
참고: 이 코드를 삽입하면 모든 상단/하단 이동 스크롤 버튼이 감춰집니다. 만약 상단 이동 스크롤 버튼은 남기려는 경우, 붙여넣은 코드에서 #scrollTopMob {display: none !important;} 줄 전체를 삭제하면 됩니다.
```
<style>
/* 상단/하단 이동 스크롤 버튼 숨김 */
    #scrollTopMob {display: none !important;}
    #scrollDownMob {display: none !important;}
</style>
```
저장 버튼을 클릭해 적용합니다.
(선택 사항) 통합검색과 같이 장바구니, 마이페이지, 로그인/가입하기 메뉴에서도 상단/하단 이동 스크롤 버튼을 감출 수 있습니다. 위 5단계에서 사용한 코드를 복사해, 같은 방법으로 나머지 메뉴에도 추가해 주세요.
참고: 위젯 복사 기능을 활용하면 더 빠르고 간편한 작업이 가능합니다.

상단/하단 이동 스크롤 버튼 항상 표시하기

이 도움말의 코드는 방문자가 마우스 휠 스크롤을 내렸을 때만 버튼이 표시되도록 합니다. 만약 버튼이 항상 표시되도록 설정하려면 아래의 지침에 따라 일부 CSS 코드를 삭제해 주세요.

설정방법

TOP 버튼과 DOWN 버튼 CSS 스타일(PC 모바일 모두)에 입력된 display: none; 속성을 모두 삭제합니다.
상단/하단 이동 스크롤 스크립트에서 none 으로 처리된 부분을 모두 block 으로 대체합니다.
저장 버튼을 클릭해 적용합니다.
이제 상단/하단 이동 스크롤 버튼이 항상 표시됩니다.

하단 스크롤 이동 버튼이 동작하지 않나요?

메뉴에 하단 숨김 옵션을 적용했다면 하단 이동 버튼이 정상적으로 동작하지 않을 수 있습니다. 그 이유는 이 도움말에서 제공하는 코드가 아임웹 기본 하단 디자인(하단 설정하기)을 이용 중인 사용자를 대상으로 제작되었기 때문입니다.

만약 커스텀 하단 만들기 도움말에 따라 나만의 하단 섹션을 만들어 이용 중이거나, 메뉴에 하단 숨김 옵션을 적용했다면 이 도움말에 따라 기존에 작성한 코드의 일부를 수정해 주세요.

추가방법

내 사이트 관리자 페이지에 접속 후 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
마우스 휠 스크롤을 내려 Footer Code 항목으로 이동합니다.
상단/하단 이동 스크롤 버튼 코드에서 <script> 로 시작하는 부분으로 이동합니다.
PC 버전 하단 이동 버튼을 클릭하면 내가 만든 커스텀 하단 섹션으로 이동하도록 섹션 ID 를 수정합니다.
1. function downFunction() 블록에 작성된 #doz_footer 를 찾습니다.
2. #doz_footer 를 삭제하고, 내가 만든 커스텀 하단의 섹션 ID로 대체합니다. (예: #s2022060218c21b5c7eb9f)
  참고: 섹션의 ID를 확인하는 방법은 섹션 ID 확인하기 도움말에서 확인할 수 있습니다.
(선택 사항) 모바일 버전 하단 이동 버튼을 클릭하면 내가 만든 모바일 커스텀 하단 섹션으로 이동하도록 섹션 ID 를 수정합니다.
중요: 별도로 모바일 커스텀 하단을 만들지 않았다면 위 4번 과정에서 입력한 섹션 ID 를 #doz_footer 대신 입력해 주세요.
1. function downFunctionMob() 블록의 #doz_footer 를 찾습니다.
2. #doz_footer 삭제하고, 내가 만든 커스텀 하단의 섹션 ID로 대체합니다. (예: #s2022060218c21b5c7eb9f)
  참고: 섹션의 ID를 확인하는 방법은 섹션 ID 확인하기 도움말에서 확인할 수 있습니다.
저장 버튼을 클릭해 적용합니다.
이제 내 사이트로 돌아가 하단 이동 버튼이 정상적으로 작동하는지 확인합니다.

찾으시는 답변이 없으신가요? 조금 더 단순한 키워드로 가이드를 검색해 보세요.
운영시간 내 채팅상담은 링크를 통해 접속 가능합니다.

목록으로

지금 신청하면 PG 가입비 무료!
PG 가입비 없이 바로 상품을 판매해 보세요

전문 디자이너에게 의뢰하세요
완성도있는 브랜드를 위한 전문가 찾기

아임웹으로 쉽게 시작하고 높이 성장하세요.
요금제별 기능 살펴보기

무엇을 도와드릴까요?

자주 묻는 질문 가이드

상단/하단 이동 스크롤 버튼 만들기 (코드, 고급)

교육자료

제작방법

1단계: 버튼 이미지 주소(URL) 획득하기

2단계: 코드 복사 및 붙여넣기

3단계: 코드 수정하기

1. TOP 버튼 위치 수정하기

2. DOWN 버튼 위치 수정하기

3. TOP 버튼 HTML 수정하기

4. DOWN 버튼 HTML 수정하기

4단계: 모바일 상품 상세페이지 예외처리하기

설정방법

5단계: 동작여부 확인하기

추가 도움말

모바일 기기의 통합검색 메뉴에서 스크롤 버튼 감추기

설정방법

상단/하단 이동 스크롤 버튼 항상 표시하기

설정방법

하단 스크롤 이동 버튼이 동작하지 않나요?

추가방법

아임웹 가이드

지금 신청하면 PG 가입비 무료! PG 가입비 없이 바로 상품을 판매해 보세요

전문 디자이너에게 의뢰하세요 완성도있는 브랜드를 위한 전문가 찾기

아임웹으로 쉽게 시작하고 높이 성장하세요. 요금제별 기능 살펴보기

상단/하단 이동 스크롤 버튼 만들기 (코드, 고급)

교육자료

제작방법

1. TOP 버튼 위치 수정하기

2. DOWN 버튼 위치 수정하기

3. TOP 버튼 HTML 수정하기

4. DOWN 버튼 HTML 수정하기

설정방법

추가 도움말

설정방법

설정방법

추가방법

아임웹 가이드

지금 신청하면 PG 가입비 무료!
PG 가입비 없이 바로 상품을 판매해 보세요

전문 디자이너에게 의뢰하세요
완성도있는 브랜드를 위한 전문가 찾기

아임웹으로 쉽게 시작하고 높이 성장하세요.
요금제별 기능 살펴보기