top버튼 넣기_티스토리 스킨 변경하기

블로그 내용이 길어서 아래로 스크롤 하다보면

맨 위로 올라가는 메뉴인 top버튼이 있습니다.

 

티스토리 스킨에는 없네요.

포토샵을 이용하여

이렇게 만들었습니다.

배경이 검정색이 아니고 선색이 회색이라서 제대로 그리려고 임시로 검은 배경을 넣었습니다..

100픽셀로 만들었더니 너무 커서

30px 로 줄였습니다.

딱 이사이즈 입니다.

색이 너무 흐리네요...ㅠㅠ..

파일명은 top.png로 만들어 줍니다.

스킨편집 - 파일업로드로 해당 파일을 업로드 해 줍니다.

 

그리고 html 편집으로 가서 맨 아래에 </body> 위에 스크립트를 넣어 줍니다.

저는 460번줄에 넣었습니다.

<script type="text/javascript">
$(function(){
  $("#gotop").hide();
  $(window).scroll(function(){
    if($(this).scrollTop() > 100){$("#gotop").fadeIn();}
    else{$("#gotop").fadeOut();}
  });
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:10px;right:10px;z-index:99999999" title="Top"><img src="./images/top.png" border="0"/></a>

복사하여 붙여 넣으시면 됩니다.

 

5번째 줄은 100px 아래로 내려가면 나타납니다.

아래로 내려가면 나타나는 것이 아닌 처음부터 나타나게 하려면

$("#gotop").hide(); 라인을 삭제하고 display:none; 을 넣어 주면 됩니다.