상단 이동 스크롤 버튼 만들기 - 코드형

  아임웹 연구소 소장 해준  |  2017 . 09 . 10

시작에 앞서
웹 페이지가 길어지면 방문자가 다시금 상단으로 올라가고자 할 때, 마우스 스크롤을 몇 번이나 반복해서 올려야 하기 때문에 번거로울 수 있습니다. 오늘은 그 번거로움을 원클릭으로 해결할 수 있는 '상단 스크롤 이동' 버튼 제작법을 알려드립니다.

실제 작동 장면은 http://imweblab.com 에서 확인하실 수 있습니다.




1단계, 소스 코드 다운로드 및 복사하기
아래 소스 코드를 마우스로 드래그하여, 복사(단축키 : Ctrl + C)합니다.

<!-- 상단 이동하기 버튼 -->
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("body").offset().top
}, 500);
});
});
</script>

<style>
.scrollTopBtn {
 display: none;
 position: fixed;
 bottom: 30px;
 right: 20px;
 z-index: 99;
 border: 1px solid #0092cb;
 outline: none;
 background-color: #00a1e0;
 font-size: 1em;
 font-weight: bold;
 cursor: pointer;
 padding: 13px 17px;
 border-radius: 4px;
}
.scrollTopBtn:hover {
 border: 1px solid #303030;
 background-color: #333333;
}
</style>

<a href="javascript:;" class="scrollTopBtn" style="position:fixed; right:25px; bottom:25px; display:block; color:#ffffff; z-index:999" id="click">상단이동</a>




2단계, Footer Code에 소스 코드 붙여넣기
1) 아임웹 사이트 관리 메뉴 > 환경설정 > SEO, 헤더설정 메뉴로 이동합니다.
2) SEO, 헤더설정 메뉴, 가장 하단에 Footer Code를 작성할 수 있는 공간이 있습니다. 위 1단계에서 복사했던 소스 코드를 붙여 넣어주세요.
3) '저장'을 클릭해, 변경사항을 저장합니다.





3단계, 소스 코드 편집하기
붙여넣은 소스 코드를 편집하여 [버튼 색상] 및 [버튼 텍스트]를 바꿀 수 있습니다.

1. 버튼 색상 편집하기
상단 이동 스크롤 버튼의 색상을 변경할 수 있습니다.

border: 1px solid #0092cb; /* 버튼 테두리 색상을 바꿀 경우 #0092cb 를 다른 색상값으로 바꿔주세요. */

background-color: #00a1e0; /* 버튼 배경색을 바꿀 경우 #00a1e0 을 다른 색상값으로 바꿔주세요. */
font-size: 1em; /* 텍스트 크기를 바꾸려면 숫자를 바꿔주세요. 예로 들면 1.25em */

padding: 13px 17px; /* 텍스트 사방에 여백을 더 주려면 숫자를 바꿔주세요. 13px 은 상하, 17px 은 좌우 */
border-radius: 4px; /* 사각형 모서리의 둥근 정도를 바꾸려면 숫자를 바꿔주세요. 0px 은 직사각형입니다. */

2. 롤오버 버튼 색상 편집하기
버튼에 마우스 커서를 갖다 댔을 때, 버튼 색상이 바뀌도록 설정할 수 있습니다. 이 기능은 PC에서만 작동합니다.

border: 1px solid #303030; /* 버튼 테두리 색상을 바꿀 경우 #0092cb를 다른 색상값으로 바꿔주세요. */
background-color: #333333; /* 버튼 배경색을 바꿀 경우 #00a1e0을 다른 색상값으로 바꿔주세요. */

3. 버튼 위치 및 버튼 텍스트 색상 변경하기
버튼의 위치와 버튼 텍스트의 색상을 바꿀 수 있습니다.

<a href="javascript:;" class="scrollTopBtn" style="position:fixed; right:25px; bottom:25px; display:block; color:#ffffff; z-index:999" id="click">상단이동</a>

/* 버튼의 위치를 변경하려면, right와 bottom의 픽셀(px) 값을 바꿔주세요. */
/* 텍스트 색상을 바꾸려면, color: #ffffff 의 색상값을 바꿔주세요. */
/* 텍스트를 바꾸려면, 한글로 써진 부분을 바꿔주세요. 예를 들면 [상단이동]을 [TOP]으로 바꿀 수 있습니다. */



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, 네이버 페이, KCP 공식파트너입니다.