티스토리 블로그: '탑 버튼' 만들기

티스토리 블로그 꾸미기: Top Button 만들기

---

liis - Top Button

사이트 화면 길이가 길 경우 다시 맨 상단 위로 올라가는 Top 버튼이 있으면 편리하다. 내가 필요해서 붙인 Top 버튼. liis 블로그에도 오른쪽 하단에 위로 올라가는 화살표 이미지가 보일 것이다. 다들 익숙하게 알고 있을 탑버튼이 바로 이거다. 

 

html과 CSS를 함께 사용하기 때문에 퍼블리싱 초보들은 헷갈릴 수도 있지만, 아래 소스들을 각 알맞은 위치에 차근차근 넣어주면 쉽게 만들 수 있다. (소스는 COFS님 블로그에서 관련 내용을 토대로 만들었다.)

---

html: Top 버튼 추가

나는 '티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 'footer' 태그 위에 추가하였다.

<a id="MOVE_TOP_BTN" href="#">
	<img src="./images/top_btn.png">
</a>

01. id값

id="MOVE_TOP_BTN"은 버튼 스타일을 정하기 위해 특정 이름을 붙인 거라고 생각하면 된다. " "사이의 이름은 원하는 대로 바꿔도 되지만, Script나 CSS에서 스펠링이 하나라도 틀리면 오류가 생기니까 그냥 위 소스를 그대로 복사해서 붙여넣기를 추천한다^^;

 

 

02. 이미지 교체

Top 버튼 모양은 구글 아이콘에서 이미지를 다운받아 넣었다. 만약 이미지를 넣고 싶지 않다면 'img' 태그 줄을 지우고 텍스트를 입력하면 된다.

티스토리 블로그에서 이미지 추가하기

나와 같이 이미지를 넣는 방법은 '티스토리 블로그 관리자 페이지 > 스킨편집 > html편집 > 파일업로드'로 들어가서 아래에 있는 '추가' 버튼을 클릭하여 추가하는 것이다. 

그리고 위에 있는 'img' 태그 안에 있는 경로 그대로 복사하고 파일명만 잘 써넣으면 된다. 나의 탑버튼 이미지 파일명은 'top_btn.png'이라서 위와 같이 넣은 것이다.

---

Script 추가

'티스토리 블로그 관리자 페이지> 스킨편집 > html 편집'에서 html 소스 화면의 가장 아래에 다음 스크립트를 추가하였다. 아래 스크립트는 탑버튼을 클릭했을 때, 1) 페이지 맨 위로 이동하고, 2) 자연스럽게 이동하는 과정을 보여주는 액션 효과를 준다.

<script>
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 800) {
                $('#MOVE_TOP_BTN').fadeIn();
            } else {
                $('#MOVE_TOP_BTN').fadeOut();
            }
        });
        
        $("#MOVE_TOP_BTN").click(function() {
            $('html, body').animate({
                scrollTop : 0
            }, 500);
            return false;
        });
    });
</script>

↓ 세부적인 스타일은 다음과 같이 바꿀 수 있다.

 

01. 탑 버튼 등장 위치

위 소스에서 800이라는 숫자가 탑 버튼의 등장 위치를 조정하는 부분이다. 설명하자면 스크롤 800px 정도 했을 때, 탑 버튼이 등장하도록 설정한 것이다. 더 빠르게 등장하기를 원한다면 숫자를 작게, 더 늦게 등장하기를 원한다면 숫자를 크게 바꾸면 된다.

 

02. 페이지 맨 위로 올라가는 속도

여기서 숫자 500이 속도를 뜻한다. 여기서 500은 0.5초다. 숫자를 조정하면서 원하는 스타일로 맞추면 된다.

---

CSS: 위치 스타일 설정

'티스토리 블로그 관리자 페이지> 스킨편집 > html 편집'에서 CSS페이지에 다음 스타일을 추가하였다.

a#MOVE_TOP_BTN {
    position: fixed;
    right: 2%;
    bottom: 25px;
    display: none;
    z-index: 999;
}

↓ 세부적인 스타일은 다음과 같이 바꿀 수 있다.

 

01. id값

'MOVE_TOP_BTN'은 앞서 말한 대로 버튼의 이름이라고 생각하면 된다. 해당 이름의 버튼 스타일을 다음과 같이 정한다라는 뜻이다.

 

02. 위치

위치는 위 소스 기준으로 right와 bottom 값을 변경하면 된다. 각각 화면 오른쪽과 아래에서 얼마만큼 떨어져 위치해있는가를 보여주는 것이다. 즉, 현재 Top버튼은 오른쪽에서 화면 전체 비율의 2%만큼 떨어져 있고, 화면 아래에서부터 25px만큼 떨어진 곳에 있다는 뜻이다. 내 현재 블로그 화면에서 확인할 수 있다. 숫자를 바꿔가면서 원하는 위치로 설정해보자. (만약 왼쪽이나 위에 탑버튼을 넣고 싶다면, 각각 left, top 값을 대신 넣으면 된다.)

 

 

 

모바일에서도 동일하게 적용된다^^

---

by. liis (Life is like this)