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

목차

티스토리 블로그 탑(TOP) 버튼 만드는 방법

 

 

티스토리 블로그의 TOP버튼은 하단의 '푸터'부분에 조그마하게 위치하거나 스킨에 따라 아예 없는 경우가 있습니다.

그렇기 때문에 페이지를 끝까지 내리지 않는 이상은 스크롤을 올려서 상단으로 이동해야 하는 불편함이 있습니다.

하지만 TOP 버튼을 설치한다면 포스팅을 스크롤하면서 읽다가 어디서든 TOP 버튼을 클릭만 하면 본문의 제일 상단으로 쉽게 이동할 수 있습니다.

 

 

오래된 코드라 많이 알고 계시는 내용이고 또 꼭 필요할까 하는 생각에, 포스팅을 할까 말까 고민하다가 제가 TOP 버튼을 설치하고 사용해 보니 편하기도 하고 나중을 위해 TOP 버튼의 설치법을 기록해 두려는 목적으로 포스팅을 합니다.

 

탑(TOP) 버튼 미리보기

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

스크롤을 내리면 '탑 버튼'이 나타나고, 스크롤을 다시 올리면 '탑 버튼'이 사라지고 '탑 버튼' 클릭 시 최상단으로 올라갑니다.

 

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

제가 만든 TOP 버튼은 마우스 오버 시 이미지가 변경되는 스타일로 2개의 아이콘이 필요합니다.

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

top1.zip

0.01MB

 

top2.zip

0.01MB

 

top3.zip

0.01MB

 

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

---

 

탑(TOP) 버튼 HTML 편집

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

 

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

---

 

2. HTML 탭에서 코드의 제일 아래쪽 </body> 위에 아래처럼 코드를 적용합니다.

 

728x90

 

3. 아래의 HTML코드 중 마음에 드는 코드를 복사 후 </body> 위에 넣어주시면 됩니다.

 

마우스를 TOP 버튼에 올리면 아이콘의 모양이 변함

<!--탑(TOP)버튼 시작-->
<script type="text/javascript">
$(function(){
  $("#gotop").hide();
  $(window).scroll(function(){
    if($(this).scrollTop() > 500){$("#gotop").fadeIn();}
    else{$("#gotop").fadeOut();}
  });
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:20px;right:20px;z-index:999" title="Top">
<img src="./images/top1.png" onmouseover="this.src='./images/top2.png'" onmouseout="this.src='./images/top1.png'" border="0"/></a>
<!--탑(TOP)버튼 종료 -->

 

마우스를 TOP 버튼에 올려도 아이콘의 변화가 없음

<!--탑(TOP)버튼 시작-->
<script type="text/javascript">
$(function(){
  $("#gotop").hide();
  $(window).scroll(function(){
    if($(this).scrollTop() > 500){$("#gotop").fadeIn();}
    else{$("#gotop").fadeOut();}
  });
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:20px;right:20px;z-index:999" title="Top">
<img src="./images/top1.png" border="0"/></a>
<!--탑(TOP)버튼 종료 -->

 

코드설명

<!--탑(TOP)버튼 시작-->

<script type="text/javascript">

$(function(){

  $("#gotop").hide();

  $(window).scroll(function(){

    if($(this).scrollTop() > 500){$("#gotop").fadeIn();}

← 스크롤이 500픽셀만큼 내려오면 탑(TOP) 아이콘을 fade in 효과를 주어 서서히 나타나도록 합니다.

    else{$("#gotop").fadeOut();}

  });

});

</script>

<a href="#" id="gotop" style="display:none;

position:fixed;

bottom:20px; ← 하단에서 20px 위에 위치.

right:20px; ← 오른쪽에서 20px 왼쪽에 위치.

z-index:999" title="Top">

 

<img src="./images/top1.png" ← 기본 이미지.

onmouseover="this.src='./images/top2.png'" ← 마우스 오버시 이미지.

onmouseout="this.src='./images/top1.png'" ← 마우스 아웃시 이미지.

border="0"/></a>

<!--탑(TOP)버튼 종료 -->

 

탑(TOP) 버튼 CSS 편집

여기까지 잘 따라오셨다면, 정상적으로 TOP 버튼이 표시가 될 겁니다, 하지만 TOP 버튼을 누르면 점프하듯 딱딱하게 상단으로 이동을 합니다.

 

그래서 검색을 좀 더 해보니 조금 부드럽게 이동을 하게 해주는 CSS코드가 있네요, 적용을 해보니 다이내믹하게 달라진 점은 없지만 어떻게 보면 조금 부드러워 보이기도 합니다.

 

코드도 간단하고 하니  적용하고 싶으신 분들은 적용하셔도 괜찮아 보입니다.

 

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

---

 

2. 아래처럼 제일 아래쪽에 CSS 코드를 추가합니다.

---

 

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

/* 탑(TOP)버튼 */
html {scroll-behavior: smooth;}
/* 탑(TOP)버튼 끝 */

---

 

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

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

 

 

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

 

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

---

 

2. CSS 코드 복사하기.

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

---

 

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

 

마무리

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

 

 

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

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

 

탑(TOP) 버튼 관련글

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

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

 

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