본문 바로가기
Front-End/CSS

티스토리 TOP버튼 만들기

cow1 2023. 11. 22. 00:18

~ 목차 ~

 

 

TOP 버튼 만들기

긴 글을 읽다 보면 다시 위로 올라가야하는 일이 종종 생기는데 스크롤을 왔다갔다 하는게 불편하여 TOP버튼을 만들어 보기로 했다. 

많은 글들을 봤는데 저는 여기 블로그를 참고했습니다.

  "https://galam.tistory.com/ "

 

Living-T blog

착한휴대폰 리빙통신입니다. 고객의 입장에서 최적의 조건으로 상담하고 판매 하겠습니다.

galam.tistory.com

 

 

버튼 이미지 다운로드

 
두 개의 이미지를 사용해서 마우스 오버 시 이미지가 변경되도록 했다.
아래 제가 만든 이미지를 첨부했으니 자유롭게 사용하세요 :)
다른 이미지를 사용하고 싶으면 이미지 두 개 만들고 아래 자바스크립트에 Top1과 Top2를 수정해 주세요!

다운 받았으면 압축 풀어주고 두 파일을 등록해야 합니다.

TOP.zip
0.48MB

스킨편집 >> HTML편집 >> 파일업로드 >> 추가 >> 파일 등록

 

마우스 오버 전
마우스 오버 후

 

 

코드 입력

1. 스킨편집 >> HTML편집 >>HTML >> </body>바로 위에 코드 입력

<!--탑(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/Top3.png" style="width:60px; height:60px" onmouseover="this.src='./images/Top4.png'" onmouseout="this.src='./images/Top3.png'" border="0"/></a>
<!--탑(TOP)버튼 종료 -->

2. 스킨편집 >> HTML편집 >> CSS >> 맨아래에 코드 입력  (스크롤을 부드럽게 내릴 수 있게 해줌!)

/* 탑(TOP)버튼 */
html {
    scroll-behavior: smooth;
}
/* 탑(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버튼이 생기고 누르면 위로 올라가는 기능이 추가!!

그럼 이만 :)

 

728x90

'Front-End > CSS' 카테고리의 다른 글

[css] on/off 토글 스위치 간단히 만들기  (5) 2024.05.28
[CSS] 글씨 강조 효과  (2) 2024.02.19
티스토리 구독 이미지 넣기  (6) 2023.11.22

'Front-End/CSS' Related Articles

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*