티스토리 꾸미기 | 반응형 탑(TOP) 버튼 만들기

 

 

 

마우스 오버 시 반응하는 탑(TOP) 버튼 만들기

티스토리 블로그의 TOP 버튼은 하단의 '푸터' 부분에 작게 위치하거나 스킨에 따라 아예 없을 수도 있습니다. 따라서 페이지를 끝까지 내리지 않는 이상 스크롤을 올려서 상단으로 이동해야 하는 불편함이 있습니다. 그러나 TOP 버튼을 설치하면 포스팅을 읽다가 어디서든 클릭만 하면 본문의 제일 상단으로 쉽게 이동할 수 있습니다.

 

탑(TOP) 버튼 미리보기

탑(TOP) 버튼은 화면 우측 하단에 위치합니다.

스크롤을 내리면 'TOP 버튼'이 나타나고, 스크롤을 다시 올리면 'TOP 버튼'이 사라집니다.

'TOP 버튼'에 마우스를 올리면 'TOP 버튼'에 그림자가 생기며 '클릭' 시 최상단으로 올라갑니다.

 

728x90

 

탑(TOP) 버튼 아이콘 업로드

1. 아래의 파일 중 마음에 드는 파일을 다운로드 후 '파일업로드'에 업로드해 줍니다.

top1.png

0.01MB

top2.png

0.00MB

 

 

2. '관리자 홈의 꾸미기'에서 '스킨 편집 > html 편집 > 파일업로드'로 들어가 다운로드 한 '버튼 이미지'를 업로드합니다.

---

 

탑(TOP) 버튼 HTML 편집

'파일 업로드'에 업로드된 top1.png 또는 top2.png 아이콘을 화면에 표시하기 위해 HTML 코드를 넣어줘야 합니다.

 

1. '파일업로드' 좌측의 'HTML'탭을 '클릭'합니다.

---

 

2. HTML 탭에서 코드의 제일 아래쪽 </body> 위에 아래와 같이 코드를 넣어준 후 적용을 '클릭'합니다.

---

 

탑(TOP) 버튼 HTML 코드

아래의 HTML 코드를 복사 후 HTML 탭 하단 </body> 위에 넣어주시면 됩니다.

<!-- 탑 버튼을 화면에 생성 -->
<div id="btn_top" title="위로"><img src='./images/top1.png' alt='top' /></div>

<script>
// 버튼을 hide한 상태로 문서 준비 (버튼을 최상단에 출력하지 않음)
  $(document).ready(function() {
		$("#btn_top").hide();

// 스크롤 시 효과 설정
  $(window).scroll(function() {  // 스크롤 시
		if($(this).scrollTop() > 1000) {  // 스크롤탑이 '1000'보다 클 때
			$("#btn_top").fadeIn();  // 버튼이 fadein되며 출력
			}
		else {  // 반대로 '1000'보다 작을 때
			$("#btn_top").fadeOut();  // 버튼이 fadeout되며 제거
			}
		});

// 버튼 클릭 시 효과 설정
  $("#btn_top").click(function() {  // 버튼 클릭 시
		$('html,body').animate( {  // 애니메이션 적용
			scrollTop : 0  // 스크롤탑이 '0'으로 올라갈 때
		}, 800);  // 800에 걸쳐서 이동
		return false;
	});
});
</script>
<!-- 탑버튼 끝 -->

img src='./images/top1.png' top1.png(버튼 이미지 파일명)

'파일 업로드'에 업로드한 버튼 이미지 파일명. 파일명이 다를 시 이 부분을 수정해 주세요.

 

탑(TOP) 버튼 CSS 편집

버튼에 스타일을 적용해 보겠습니다.

스타일은 버튼에 투명도를 주고, 버튼에 그림자 효과와 마우스 오버 효과를 주는 코드입니다.

 

1. '관리자 홈의 꾸미기'에서 '스킨 편집 > html 편집 > CSS'로 들어갑니다.

---

 

2. 아래처럼 CSS 탭 하단에, 'CSS 코드'를 추가 후 '적용'을 클릭합니다.

---

 

탑(TOP) 버튼 CSS 코드

아래의 CSS 코드를 복사 후 CSS 탭 하단에 넣어주시면 됩니다.

/* 탑버튼 스타일 */
#btn_top {
position: fixed; /* 위치 고정 */
right: 10px; /* 화면 우측 기준 */
bottom: 150px; /* 화면 하단 기준 */
z-index: 999; /* 레이어 개념, 숫자가 클수록 위에 위치 */
opacity: 1; /* 투명도 1 적용, 0.1 숫자가 작을수록 더 투명해짐 */
border-radius: 0%; /* 버튼 라운드 사각버튼 0% 원형버튼 50% */
}
#btn_top:hover{
background-color: black; /* 배경색 */
transition: 0.3s; /* 효과 적용 시간 */
transform: scale(1.0); /* 크기 확대 */
box-shadow: 0 0 10px rgba(0, 0, 0, .4); /* 그림자 효과 */
}
/* 탑버튼 스타일 끝 */

728x90

 

푸터의 기본 탑(TOP) 버튼 숨기기

반응형 TOP 버튼을 추가하면 티스토리 포스팅 하단 푸터에 위치한 기본 TOP 버튼과 새로 넣은 TOP 버튼이 모두 출력되어 TOP 버튼이 두 개로 보입니다.

 

이에 CSS 코드를 추가하여 푸터의 기존 TOP 버튼을 숨겨 깔끔하게 정리해 보겠습니다.

---

 

1. 아래처럼 새로 추가한 TOP 버튼 CSS 코드 아래쪽에 '기본 TOP 버튼 숨기기' CSS 코드를 추가한 후 '적용'을 눌러줍니다.

---

 

기본 TOP 버튼 숨기기 CSS 코드

아래 CSS 코드를 적용한 후 미리보기를 확인하면 하단의 기본 TOP 버튼이 사라진 것을 확인할 수 있습니다.

/* 기본 탑 버튼 숨기기 */
#footer .page-top {display: none;}
/* 기본 탑 버튼 숨기기 */

---

 

마무리

모바일에서 정상적으로 동작하기 위해서는 [티스토리 모바일웹 자동 연결을 사용하지 않습니다.]로 설정되어 있어야 합니다.

 

TOP 버튼은 본문의 글을 읽을 때 매우 유용한 기능입니다. 하지만, 아이폰 등 일부 운영 체제에서는 자연스럽게 TOP으로 이동하지 않는 등 문제가 있을 수 있습니다. 그럼에도 불구하고 일반적으로 사용하는 데는 큰 문제가 없습니다.

 

탑(TOP) 버튼 관련글 보러가기

'▸티스토리 이야기/•링크버튼 및 TOP버튼 만들기' 카테고리의 글 목록

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"