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

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

 

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

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

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

 

 

---

 

 

---

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

 

 

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

 

 

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

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

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

<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>