티스토리 꾸미기 | 스크롤 반응형 탑(top) 다운(down) 버튼 만들기

 

 

 

 

스크롤에 반응하는 탑(top) 다운(down) 버튼 만들기

티스토리 블로그 탑(TOP) 다운(DOWN) 버튼의 장점

긴 페이지를 스크롤하면 사용자는 맨 위로 올라가는 것이 번거로울 수 있습니다.

탑 버튼은 사용자가 페이지 상단으로 쉽게 이동할 수 있도록 도와줍니다. 마찬가지로 다운 버튼은 긴 페이지에서 아래로 쉽게 이동할 수 있도록 도와줍니다.

 

탑(top) 다운(down) 버튼 미리보기

이번에는 스크롤에 반응하는 '탑 버튼'과 '다운 버튼'은 스크롤을 올리고 내리면  '탑 버튼'과 '다운 버튼'이 부드럽게 교차되며 나오는 스크립트입니다.

728x90

 

버튼 이미지 파일 업로드

탑(top) 다운(down) 버튼은 스크롤 시 이미지가 변경되는 스타일로 탑(top) 다운(down) 2개의 이미지 파일이 필요합니다.

아래의 zip파일 중 마음에 드는 파일을 다운로드 후 압축을 풀고 '파일업로드'에 업로드해 줍니다.

 

btn_top (1).zip

0.01MB

 

btn_top (2).zip

0.01MB

 

1. '관리자 홈의 꾸미기'에서 '스킨 편집 > html 편집 > 파일업로드'로 들어가 이미지 파일을 업로드합니다.

---

 

2. 주의사항: 이미지 파일을 수정하거나 새로운 파일로 업로드 시 파일명을 정확히 확인 후 업로드 하시기 바랍니다.

(탑 버튼) btn_top.png (다운 버튼) btn_bottom.png

 

HTML 편집

'파일업로드'에 업로드된 btn_top.png, btn_bottom.png 아이콘을 화면에 표시하기 위해서는 html 코드를 넣어줘야 합니다.

 

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

---

 

2. HTML 탭에서 코드의 제일 아래쪽 </body> 위에 아래의 코드를 복사하여 붙여 넣고 '적용'합니다.

---

 

3. HTML코드 복사▼

<!-- 탑버튼 시작 -->
<div id="btn_top" title="위로"><img src='./images/btn_top.png' alt='top' /></div>
<script>/*<![CDATA[*/$(document).ready(function(){$("#btn_top").hide();$("#btn_top").click(function(){$("html,body").animate({scrollTop:0},800);return false});var c;$(window).scroll(function(e){c=true});setInterval(function(){if(c){a();c=false}},250);var b=0;var d=1;function a(){var e=$(window).scrollTop();if(Math.abs(b-e)<=d){return}if(e>b){$("#btn_top").fadeOut()}else{if(e+$(window).height()<$(document).height()){$("#btn_top").fadeIn()}}b=e}});/*]]>*/</script>
<!-- 탑버튼 끝 -->

<!-- 다운버튼 시작 -->
<div id="btn_bottom" title="아래로"><img src='./images/btn_bottom.png' alt='bottom' /></div>
<script>/*<![CDATA[*/$(document).ready(function(){$("#btn_bottom").hide();$("#btn_bottom").click(function(){$("html,body").animate({scrollTop:$(document).height()-1800},800);return false});var c;$(window).scroll(function(e){c=true});setInterval(function(){if(c){a();c=false}},250);var b=0;var d=1;function a(){var e=$(window).scrollTop();if(Math.abs(b-e)<=d){return}if(e>b){$("#btn_bottom").fadeIn()}else{if(e+$(window).height()<$(document).height()){$("#btn_bottom").fadeOut()}}b=e}});/*]]>*/</script>
<!-- 다운버튼 끝 -->

728x90

 

CSS 편집

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

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

 

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

---

 

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

---

 

3. 아래의 CSS 코드를 복사 후 CSS탭 제일 아래쪽에 넣어주시면 됩니다.

/* 탑버튼 스타일 */
#btn_top {
position: fixed;
width: 40px; /* 버튼 가로 크기 */
height: 40px; /* 버튼 세로 크기 */
right: 30px; /* 버튼 우측 여백 */
bottom: 40px; /* 버튼 하단 여백 */
z-index: 999;
opacity: 0.5;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
#btn_top:hover{
background-color: black;
transition: 0.3s;
transform: scale(1.1);
}
/* 탑버튼 스타일 끝 */

/* 다운버튼 스타일 */
#btn_bottom {
position: fixed;
width: 40px; /* 버튼 가로 크기 */
height: 40px; /* 버튼 세로 크기 */
right: 30px; /* 버튼 우측 여백 */
bottom: 40px; /* 버튼 하단 여백 */
z-index: 999;
opacity: 0.5;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
#btn_bottom:hover{
background-color: black;
transition: 0.3s;
transform: scale(1.1);
}
/* 다운버튼 스타일 끝 */

---

 

기본 탑 버튼 숨기기 (2024년 04월 추가 내용)

새롭게 탑(TOP) 버튼을 넣어주면 티스토리 포스팅 하단 푸터에 위치한 기본 탑 버튼과 새로 넣어준 탑 버튼이 모두 출력되면서 탑 버튼이 2개가 보입니다.

 

---

 

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

 

1. 아래처럼 새로 넣어준 /* 다운버튼 스타일 끝  */ CSS 코드 아래쪽에 '기본 탑버튼 숨기기' CSS 코드를 추가 후 '적용'을 눌러줍니다.

---

 

2. CSS 코드 복사하기.

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

---

 

3. 적용 후 미리보기를 확인하시면 하단의 기본 탑(TOP) 버튼이 사라진 걸 확인하실 수 있습니다.

 

마무리

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

 

TOP, DOWN 버튼은 본문의 글을 읽을 때 매우 유용한 기능입니다.

다만 아이폰 등 기타 OS에서 자연스럽게 TOP으로 이동하지 않는 문제가 있지만, 일반적으로 사용하는 데는 크게 문제가 없습니다.

 

참조 블로그 : 티스토리 스크롤 반응 탑(top) 다운(down) 버튼 (tistory.com)

블로그 관리에 유용한 정보들이 너무 많이 있습니다.

 

탑(top) 버튼 관련글

[▸ 티스토리 꾸미기] - 티스토리 꾸미기 | 탑(TOP) 버튼 만드는 방법

티스토리 꾸미기 | 탑(TOP) 버튼 만드는 방법

 

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