티스토리 블로그에 탑(Top) 버튼 넣는 방법

티스토리 반응형 #1 스킨에 탑(Top) 버튼을 만들어 봅시다.

스크롤을 아래로 쭈욱 내리면서 컨텐츠를 보다가 위로 올라가려면 데스크탑에서는 Home 버튼을 누르면 되지만, 모바일에서는 한참을 스크롤해서 올려야 하는 불편함이 있죠?

Top 버튼이 있으면 한번에 위로 올라가기 편리하기 때문에 Top 버튼이 필요합니다.

제 블로그에서 스크롤을 내리면 Top 버튼이 활성화가 되고, 클릭하면 스크롤이 최상단으로 올라갑니다.

우선 탑버튼을 만들려면 Top 버튼 아이콘이 있어야 합니다.

1. 아래 Top 버튼 아이콘중에 마음에 드는 아이콘을 마우스 오른쪽 클릭을 해서 [이미지를 다른 이름으로 저장]해서 top.png로 저장 하세요.

    

2. 다운로드 받은 아이콘을 [관리]->[꾸미기]->[HTML/CSS 편집] 을 누르세요.

3. 파일다운로드 탭에서 [+추가]버튼을 클릭하여 다운로드 받은 아이콘을 업로드하세요.

4. HTML에서 아래 스크린샷처럼 </body> 바로 위에 아래 코드를 복사하여 붙여넣으세요.

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

위 코드 설명은 아래 코드 주석처리로 설명하겠습니다. 

<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:10px;right:10px;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 위에 띄웁니다-탑아이콘을 최상단에 띄우기위해서)
-->
</body>

</html>

위 설명을 참고삼아 본인 취향에 맞게 조정하세요.

예를 들어 처음부터 top 아이콘을 보여주려면, $("#gotop").hide(); 라인을 삭제하고 display:none; 을 삭제하세요.

스크롤을 200 픽셀만큼 더 아래로 내려올때 보여주려면 100이라는 숫자를 200으로 변경하시면 됩니다.

감사합니다. ^^

저작자표시비영리변경금지

• 카카오스토리
• 트위터
• 페이스북

'IT > 블로그,티스토리' 카테고리의 다른 글

카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기  (2)	2016.04.23
유튜브 동영상 반응형 웹에 삽입하는 방법  (13)	2016.04.18
티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기  (50)	2016.04.03
티스토리 최신글(최근에 올라온 글) 본문에 추가하기  (27)	2016.04.02
티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기  (4)	2016.03.24
티스토리 블로그에 탑(Top) 버튼 넣는 방법  (15)	2016.03.23
티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법  (50)	2016.03.21
티스토리(Tistory) 블로그 원본 사진 이미지 보기  (10)	2016.03.14
코드 소스 하이라이트 SyntaxHighlighter 를 수정하여 예쁘게 꾸며봅시다.  (0)	2016.03.11
티스토리(Tistory) 블로그에 코드 소스 하이라이트 SyntaxHighlighter 설정 및 활용, 버그 수정  (21)	2016.03.08
티스토리의 새 반응형 웹스킨 '#1' 카테고리 스크롤바와 글갯수 보이기  (29)	2016.03.07