[코드활용팁] 상단 이동 스크롤 버튼 만들기 (탑버튼)

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

기능 미리보기
1) 탑버튼 예시 보기에 접속하여, 페이지를 아래로 내린 뒤에 오른쪽 아래에 있는 화살표 아이콘을 눌러보세요.
2) 같은 페이지의 윗부분으로 화면이 이동하는 것을 확인할 수 있습니다.

1단계, 소스 코드 다운로드 및 복사하기

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

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


<style>
.btn_gotop {
	display:none;
	position:fixed;
	bottom:30px;
	right:30px;
	z-index:999;
	border:1px solid #ccc;
	outline:none;
	background-color:white;
	color:#333;
	cursor:pointer;
	padding:15px 20px;
	border-radius:100%;
}
</style>


<script>
$(window).scroll(function(){
	if ($(this).scrollTop() > 300){
		$('.btn_gotop').show();
	} else{
		$('.btn_gotop').hide();
	}
});
$('.btn_gotop').click(function(){
	$('html, body').animate({scrollTop:0},400);
	return false;
});
</script>

2단계, Footer Code에 소스 코드 붙여넣기

1) 캠페이너스 사이트의 관리자모드 > 환경설정 > SEO, 헤더설정 메뉴로 이동합니다.
2) SEO, 헤더설정 의 아래쪽 Footer Code 공간에 위 1단계에서 복사한 소스 코드를 붙여 넣습니다.
3) 저장을 클릭해, 변경사항을 저장합니다.

3단계, 탑버튼 위치 수정하기

버튼의 위치를 변경하려면 소스코드 중 bottom과 right의 픽셀(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>

만약 내가 원하는 탑버튼 이미지가 따로 있다면?

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

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

참고 및 제한사항

사용자가 추가한 코드에 대해서는 추가 기술지원 및 고객지원을 하지 않는 점 확인부탁드립니다.