상단 이동 스크롤 버튼 만들기 - 이미지형

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

시작에 앞서
지난 꿀팁에서는 [상단 이동 스크롤 버튼]을 코드로 구현해보았습니다. 그러나 코드로 만든 버튼은 차별적인 디자인에 어려움이 있습니다. 이럴 때 버튼을 이미지로 만들어 사용할 수도 있습니다. 오늘은 상단 이동 소스 코드와 버튼 이미지를 활용해, [상단 이동 스크롤 버튼]을 만드는 방법에 대해 알아보겠습니다.

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



1단계, 이미지 업로드하기
이미지 버튼을 코드에서 사용하려면, 먼저 사이트에 이미지를 업로드해야합니다. 사이트에 이미지를 업로드하고, 업로드한 이미지의 주소(URL)를 알아내는 방법은 아래 꿀팁에서 알아보세요.
게시판을 이미지 저장소로 활용하는 방법 >

 


2단계, 소스 코드 다운로드 및 복사하기
아래 소스 코드 파일을 마우스로 드래그하여, 복사(Ctrl + C)합니다.

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

<a href="javascript:;" style="position:fixed; right:20px; bottom:20px; display:block; z-index:999" id="click"><img src="이미지 주소" width="48px" height="48px"></a>



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





4단계, 소스 코드 편집하기
붙여넣은 소스 코드에 이미지 버튼의 주소(URL)를 입력할 수 있습니다. 하단 소스 코드에 '이미지 주소' 라고 써진 부분을 삭제하고, 이미지 주소를 입력해주세요.

<a href="javascript:;" style="position:fixed; right:40px; bottom:50px; display:block; z-index:999" id="click"><img src="이미지 주소"></a>



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

아임웹 공식제휴사

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