스크롤 압박! 되돌아갈 Top 버튼 적용하기

포스팅 하다보면 글이 길어져서 스크롤압박이 심해지는 경우가 많이 있네요.
메뉴를 보기위해 다시 스크롤을 올려야하는 귀찮음을 해결할 방법음 본문 밑에 'TOP' 버튼을 설치하면 클릭한번에 바로 본문상단으로 이동하겠죠~!

오늘은 티스토리 블로그에서 Top 버튼을 어떻게 만들고 적용하는지를 알아보겠습니다.
일단 포토샵이나 다룰줄 아는 그래픽툴로 'Top버튼' 이미지를 만듭니다.

제 Top버튼입니다.

저는 나중에 bottom 부분과 약간 겹치게 하기 위해서 배경을 투명하게 만들어야 했기 때문에 png파일로 만들었습니다.
말풍선 밑에 꼬다리 부분이 살짝 겹쳐질 거에요. 그렇기 위해서는 바탕에 색깔이 들어가면 않돼겠죠.
버튼모양이나 위치에 따라 투명바탕으로 할것인지 아님 그냥해도 되는지가 결정됩니다.

이렇게 만든 top버튼 이미지를 블로그 admin의 스킨메뉴에서 'HTML/CSS 편집'으로가서 파일업로드 합니다.
그리고 이미지 경로를 확인하세요.

그리고 다음과 같이 코딩합니다.

코딩된 태그를 간략하게 설명해 드리자면,

skin.html 의 코드는 다음과 같습니다.

<div id="btn_top">
<a href="#top"><img src=" 본인이 업로드한 Top버튼 이미지 주소 "></a>
</div>

style.css 를 보시면

#btn_top {
                text-align:center;            ← 레이어 기준, Top버튼의 위치를 가운데로 정렬하였습니다.
                padding:0 0 0 1000px;    ← 왼쪽에서 1000px 떨어진 곳에 위치합니다. 
                height:28px;                   ← Top버튼 이미지의 높이가 38px 인데요. 
                                                        높이를 10px정도 줄여서 bottom 부분과
                                                        10px정도 겹치게 됩니다.
}

※ 빨간 글씨는 본인의 블로그스킨에 따라 변경합니다.

보시면 '저걸 꼭 써줘야하나?' 라고 생각하는 부분도 있을텐데요.
예를들어 text-align:center 같은경우 이것을 써주지 않으면 Top버튼의 위치가 윈도우창을 기준으로 다음 그림처럼 외형무시하고 고정 되버리게 됩니다. 왜냐하면 밑에 왼쪽으로 1000px를 띄워줬기 때문이죠.

윈도우 창을 최대화 하면 다른 레이어상관 없이 걍 맨 왼쪽부터 1000px 떨어진 곳에 위치합니다.

윈도우 크기를 조절하면 Top버튼을 제외한 다른 레이어들만 창크기와 비례하여 위치가 변합니다.
어디서부터 띄어서 위치 시킬 것인가하는 기준이 중요합니다.

이해하셨나요?
일단 위에 말씀드린 코드 넣어보시고 속성을 하나씩 변경하시면 쉽게 이해하실겁니다.

저렇게 적용하고 완성된 모습입니다.

처음에도 말씀드렸듯이 Top버튼의 아랫부분과 bottom 부분이 살짝 겹쳤죠~
div 로 했기 때문에 겹치는 효과가 가능했습니다.
티스토리 블로그 이용하시는 분들은 아시겠지만 블로그 이쁘게 하려면 div 속성도 중요하고 어떻게 코딩하는가에 따라서 천차만별 다양한 모습의 블로그 스킨을 만들 수 있죠.

Top버튼을 만들고나니 확실히 편해졌습니다. 그동안 길었던 포스트을 위로 아래로 마우스 긁어댔던 수고를 클릭한방으로 해결했습니다.

Top버튼...없어도 그만이지만 있으니 참 편리하네요~ 여러분들도 한번 해보세용~^^