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

 

 

모바일 페이지 예시 이미지

아래 코드 삽입

<!-- 상단으로 이동하기 버튼 -->
<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>

 

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

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

끝