티스토리 TOP버튼 만들기

 

 

TOP 버튼 만들기

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

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

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

Living-T blog

 

 

버튼 이미지 다운로드

 

두 개의 이미지를 사용해서 마우스 오버 시 이미지가 변경되도록 했다.

아래 제가 만든 이미지를 첨부했으니 자유롭게 사용하세요 :)

다른 이미지를 사용하고 싶으면 이미지 두 개 만들고 아래 자바스크립트에 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버튼이 생기고 누르면 위로 올라가는 기능이 추가!!

그럼 이만 :)