티스토리 스킨 #1 오른쪽 하단에 Top 버튼 넣기

안녕하세요 랑스티비입니다.

 

제 블로그에는 제일 오른쪽 하단에 있는 탑 버튼이 있습니다.

스크롤 통하여 글을 읽다 보면 제일 상단으로 바로 가고 싶은 부분이 있어서 넣었습니다.

방법은 생각보다 간단하니 아래에 설명드릴게요.

 

 

---

 

 

---

첫 번째 파일 업로드를 통하여 Top 버튼으로 쓸 이미지를 파일업로드를 해주세요.

 

 

두 번째 HTML 제일 </body> 바로 위에 아래 코드를 넣어주세요.

 

 

코드 설명을 약간 드리자면 처음에는 탑 이미지를 감추고 있다고

스크롤이 이루어질 때 100 픽셀만큼 내려오면 탑 아이콘을 Fade In 합니다. 서서히 나타나는 거죠.

또 스크롤이 이루어 질때 100 픽셀 이하이면 탑아이콘을 처음처럼 Fade Out 합니다. 서서히 사라지는 거죠.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<code><script type="text/javascript"> $(function(){   // 처음에는 탑이미지를 감춥니다.   $("#gotop").hide();       // 스크롤을 할때   $(window).scroll(function(){       // 스크롤이 100 픽셀만큼 내려오면 탑아이콘을 fade in 합니다. (서서히 나타납니다)     if($(this).scrollTop() > 100){$("#gotop").fadeIn();}     // 스크롤이 100 픽셀 이하이면 탑아이콘을 fade out 합니다. (서서히 사라집니다)     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> </body> </code>