아임웹 팁&테크

다양한 활용법, 최신 기능을 알고 싶을 땐 아임웹 팁&테크

디자인상단 이동 스크롤 버튼 만들기 (탑버튼)


시작에 앞서

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


  1. 탑버튼을 코드로 만드는 방법
  2. 탑버튼을 내가 원하는 이미지로 넣고 싶을 때
  3. 모바일 버전은 따로 작업하고 싶을 때 (2019.5.29 updated)




1. 탑버튼을 코드로 만드는 방법


실제 작동 장면 예시


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

<!-- 상단 이동하기 버튼 -->
<a href="#doz_header" class="btn_gotop" id="click">
<span class="glyphicon glyphicon-chevron-up">
</span>
</a>

<style>
.btn_gotop {
display: block;
position: fixed;
bottom: 35px;
right: 30px;
z-index: 999;
border: 1px solid rgba(0,0,0,0.25);
outline: none;
background-color: white;
color: rgba(0,0,0,0.7);
cursor: pointer;
padding: 15px 20px;
border-radius: 100%;
}
</style>


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



3단계, 탑버튼 위치 수정하기
버튼의 위치를 변경하려면 소스 코드 중 bottom과 right의 픽셀(px) 값을 변경해주세요. 아래 코드 중 /* */ 안의 코멘트를 확인하시고 왼쪽 픽셀(px)값을 바꿔주세요.

<!-- 상단 이동하기 버튼 -->
<a href="#doz_header" class="btn_gotop" id="click">
<span class="glyphicon glyphicon-chevron-up">
</span>
</a>

<style>
.btn_gotop {
display: block;
position: fixed;
bottom: 35px; /* 탑버튼을 화면의 가장 아래에서 몇 픽셀 떨어뜨릴 것인지 정하세요*/
right: 30px; /* 탑버튼을 화면의 가장 오른쪽에서 몇 픽셀 떨어뜨릴 것인지 정하세요*/
z-index: 999;
border: 1px solid rgba(0,0,0,0.25);
outline: none;
background-color: white;
color: rgba(0,0,0,0.7);
cursor: pointer;
padding: 15px 20px;
border-radius: 100%;
}
</style>




2. 탑버튼을 내가 원하는 이미지로 넣고 싶을 때

위에서 알려드린 1단계 코드로 만드는 탑버튼 대신 내가 원하는 다른 버튼 이미지가 있다면, 아래 코드를 복사해서 똑같은 방법으로 footer code 부분에 붙여넣기 합니다.
(단, 주의하실 점은, 원하는 이미지의 웹 주소를 알고 있어야 한다는 점입니다.)

<!-- 상단 이동하기 버튼 -->
<div class="btn_gotop" style="position:fixed; bottom:35px; right:30px; z-index:99;">
<a href="#doz_header">
<img src="이미지주소" style="width:100px">
</a>
</div>




3. 모바일 버전은 따로 작업하고 싶을 때 (2019.6.26 updated)

모바일은 디스플레이 크기가 작다보니 탑버튼 크기 또는 위치 등을 PC와는 다르게 조정하고 싶을 때가 있습니다. 그런 경우에는 PC와 모바일에 다른 값을 적용해주셔야 합니다. 값을 다르게 지정한 후, 위와 똑같은 방법으로 footer code에 붙여넣기를 해주시면 됩니다.

<!-- 상단 이동하기 버튼 -->
<div class="btn_gotop_pc hidden-xs hidden-sm">

<a href="#doz_header">
<img src="PC 버전의 이미지 주소" style="width:70px;" /*PC 버전 탑버튼 가로 너비*/>
</a>
</div>


<div class="btn_gotop_mobile hidden-md hidden-lg">
<a href="#doz_header">
<img src="모바일 버전의 이미지 주소" style="width:50px;" /*모바일 버전 탑버튼 가로 너비*/>
</a>
</div> 

<style>
.btn_gotop_pc {
bottom: 50px; /*탑버튼을 PC 화면의 가장 아래에서 몇 픽셀 떨어뜨릴 것인지 정하세요*/
right: 30px; /*탑버튼을 PC 화면의 가장 오른쪽에서 몇 픽셀 떨어뜨릴 것인지 정하세요*/
position: fixed;
z-index: 999;
}
.btn_gotop_mobile {
bottom: 40px; /*탑버튼을 모바일 화면의 가장 아래에서 몇 픽셀 떨어뜨릴 것인지 정하세요*/
right: 20px; /*탑버튼을 모바일 화면의 가장 오른쪽에서 몇 픽셀 떨어뜨릴 것인지 정하세요*/
position: fixed;
z-index:999;
}
</style>




캠퍼스 뉴스레터 구독하기

아임웹캠퍼스 뉴스레터를 구독하고 유용한 비즈니스 팁 및 교육정보를 받아보세요.