티스토리 Top 버튼 넣기

 

1. Top 버튼에 사용될 이미지를 스킨편집-html편집-파일업로드로 등록

 

top.png

0.00MB

 

 

2. 스킨편집 - Html에 추가

<script type="text/javascript">

$(function(){
  $("#gotop").hide();
  // 처음에는 탑이미지를 감춥니다.
  $(window).scroll(function(){
  // 스크롤을 할때
    if($(this).scrollTop() > 100){$("#gotop").fadeIn();}
    //  스크롤이 100 픽셀만큼 내려오면 탑아이콘을 fade in 합니다. (서서히 나타납니다)
    else{$("#gotop").fadeOut();}
    // 스크롤이 100 픽셀 이하이면 탑아이콘을 fade out 합니다. (서서히 사라집니다)
  });
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:400px;right:20px;z-index:99999999" title="Top"><img src="./images/top.png" border="0"/></a>

<!--
display:none (화면에서 안보이게 합니다)
position:fixed (스크롤이 어느위치에 있든 화면에서 고정된 곳에 위치합니다)
bottom:10px (하단에서 10px 위에 위치합니다)
right:10px (오른쪽에서 10px 왼쪽에 위치합니다)
z-index:99999999 (레이어를 99999999 위에 띄웁니다-탑아이콘을 최상단에 띄우기위해서)
-->

 

3. CSS 마지막 줄에 추가

html { scroll-behavior: smooth; }