티스토리 탑(TOP) 버튼 만들기

 

티스토리 TOP 버튼 만들기

 

 

 

티스토리의 TOP 버튼은 하단에 조그맣게

 

존재하거나 스킨에 따라서는 아에 없는경우도 있습니다.

 

그렇기 때문에 페이지를 끝까지 내리지 않는 이상

 

상단으로 이동하는 불편함이 있는데요.

 

이번 포스팅에서 TOP 버튼을 설치해서 언제든지

 

버튼만 클릭하면 상단으로 올라갈수 있게 만들어보겠습니다.

 

TOP 버튼 아이콘 업로드

 

첨부 된 파일을 압축 해제 후 파일업로드를 해줍니다.

top1.zip

0.01MB

 

 

 

 

 

 

 

TOP 버튼 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/top1.png" onmouseover="this.src='./images/top2.png'" onmouseout="this.src='./images/top1.png'" border="0" alt="top" /></a>
<!--탑(TOP)버튼 종료 -->

 

 

TOP 버튼 CSS 편집

 

여기까지 막힘없이 오셨다면 정상적으로 TOP 버튼이 표시됩니다.

 

여기서 좀더 부드럽게 이동해주는 옵션을 적용하고 싶다면 아래 CSS 코드를 적용해주시면 됩니다.

 

 

마무리

 

본문을 읽을 때 TOP 버튼은 유용하게 사용되는 것 같습니다. 한번 꼭 적용해보세요 ~!