티스토리 블로그 맨 위로 가기 TOP 버튼 넣는 방법

웹 페이지 내용이 많은 경우에 내용을 보다가 맨 위로 이동할 때가 있죠. 키보드 [Home]으로 맨 위로 이동할 수 있지만 주로 마우스를 사용해서 웹 페이지를 보는데 그럴 때 맨 위로 이동할 수 있는 버튼이 있으면 편리하겠죠. 그럼 스크립트를 사용하여 티스토리 블로그에 맨 위로 가기 TOP 버튼 넣는 방법에 대해서 알아보죠.

◎ 포스트 기준 – Odyssey 스킨

[순서]

1. 맨 위로 가기 버튼을 사용할 이미지 업로드
2. HTML 소스에 스크립트 구문 추가
3. 확인

1. 맨 위로 가기 버튼을 사용할 이미지 업로드

TOP 버튼으로 사용할 이미지는 인터넷에서 원하는 이미지를 찾아 다운로드하시면 됩니다. 그리고 아래 TOP 이미지는 간단하게 제작했는데요 필요하시면 다운로드하여 사용하시면 됩니다.

icon_top 다운로드

▶ [스킨 편집] 메뉴 → [html 편집] 클릭

▶ [파일업로드] 탭 → Top 이미지 추가

2. HTML 소스에 스크립트 구문 추가

▶ [HTML] 탭 → </body> 태그 바로 위에 추가

▶ 소스

<!--TOP 버튼 Start-->
<script>
    $(function(){
        $("#btnTop").hide();
        $(window).scroll(function(){
            if($(this).scrollTop() > 100){$("#btnTop").fadeIn();}
            else{$("#btnTop").fadeOut();}
        });
    });
</script>
<a href="#" id="btnTop" style="display:none; position:fixed; bottom:130px; right:20px; z-index:9999" title="맨위로"><img src="./images/icon_top.png" border="0"/></a>
<!--TOP 버튼 End-->

▶ 설명

$(“#btnTop”).hide();

→ 페이지 접속 시 Top 버튼 숨기기 처리

if($(this).scrollTop() > 100){$(“#btnTop”).fadeIn();}

→ 스크롤바가 100px 아래로 내려오면 Top 버튼 보이게 처리

style=”display:none; position:fixed; bottom:130px; right:20px; z-index:9999″

→ Top 버튼 위치는 고정(position:fixed)이고 맨 아래 오른쪽에 위치(z-index:9999)

→ Top 버튼을 오른쪽에서 20px, 아래에서 130px 여백 추가 (원하는 px으로 수정)

→ 아래에서 130px으로 한 이유는 애드센스 광고 위에 위치하기 위해서

3. 확인

▶ PC 화면

▶ 모바일 화면

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

티스토리 블로그 맨 위로 가기 TOP 버튼 넣는 방법

[순서]

1. 맨 위로 가기 버튼을 사용할 이미지 업로드

2. HTML 소스에 스크립트 구문 추가

3. 확인

동일 카테고리 게시글