티스토리 블로그 맨 위로 이동버튼 (Top버튼) 넣는 3가지 방법

여행, 익숙함과 편리함을 버리고 짊어질 수 있을만큼만 소유하고 미지의 세계로 나를 떠미는 것.
언젠간날고말거야 · 2013. 4. 28. 10:00 블로그&IT/블로그 ·

<맨 위로 이동버튼 (Top버튼, go to top button)을 넣는 3가지 방법>  오늘도 이웃 블로거의 요청으로 강좌를 작성합니다.!! (너무 늦었나?) 사실 포스팅을 써 놓은지는 오래되었는데, 이래저래 다른 포스팅에 밀려 이제야 올라오네요. 아무튼 오늘 포스팅은 티스토리 말고도 다른 설치형 블로그에서도 모두 적용할 수 있습니다. 본문 상단으로 바로 이동하는 버튼 (TOP버튼) 설치하는 방법. 들어갑니다~!

  블로그에 탑버튼을 설치하는 방법은 크게 세 가지가 있습니다.

 

첫번째, 스크립트 없이 누르자마자 바로 화면을 위로 착~허니 올릴 수 있는 방법.

두번째, Script를 이용해 화면이 스크롤되어 올라가는 속도를 조절할 수 있는 방법.

세번째, jQuery를 이용해 속도, 버튼 타나나는 시점을 조절할 수 있는 방법이 있습니다.

 

 

이 세 방법은 각각 장단점이 있는데요,

 

첫번째, 방법은 누르면 순간이동 하기 때문에 스크롤의 시각적인 효과는 없습니다.

하지만 시스템 리소스는 점유하지 않아 속도가 빠른 블로그를 만들 수 있습니다.

 

두번째, 세번째, Script를 이용하는 방법은 부드럽게 흐르는듯 스크롤되어 올라갑니다만,

스크립트를 로딩하기 때문에 블로그가 상대적으로 느려집니다.(미미하지만...)

 

오늘 이 세가지 방법을 다 가르쳐 드리겠습니다.

 

그리고 아래로 가는 버튼도 설치 가능하지만 추천드리지 않습니다.

'아래로' 기능은 본문을 읽지도 않고 댓글 달러 내려가는 스팸블로거들만 좋아합니다.

 

 

 

 

 

 

 

 

 

오늘 저 따라하시면 블로그의 원하는 위치에 이런 버튼이 생기게 됩니다.

강좌 설명을 위해 버튼 이미지를 아래 몇 개 첨부해 놨습니다.

다른 이미지를 원하시면 만드시거나, 무료 아이콘 사이트에서 받으세요.

 

 

위 이미지 다운로드 ->Arrow_up.zip

 

 

 

 

 

첫번째 방법, 순간이동 위로 버튼

 

 

▼ 먼저, 원하는 위로 버튼(TOP버튼) 아이콘을 구하셨으면 블로그에 업로드 합니다.

(업로드한 파일 이름은 꼭 기억하고 계세요. 파일명 및 확장자 대/소문자 잘 확인하세요.)

 

 

 

 

 

 

▼ 그림을 업로드 하셨으면 skin.html 파일에 소스코드를 넣어야 합니다.

   Ctrl+F 로 <body> ~ </body> 태그를 찾은 그 사이에 아래 코드를 넣어주면 됩니다.

 

   코드 다운로드 -> top.txt

 

<!-- 위로 버튼 Start -->
<a style="display:scroll;position:fixed;bottom:10px;right:10px;" href="#" title=Top>
<img src=./images/top.png border="0"/></a>
<!-- 위로 버튼 END -->

 

 

 

▼ 코드설명

 

fixed; = 스크롤해도 움직이지 않고 화면에 고정.

bottom:10px; = 아래로부터 10픽셀 여백

right:10px; = 오른쪽으로 부터 10픽셀 여백

href="#" = #뒤에 아무것도 없으면 Top으로 이동, 만약 <div id="content"> 로 이동시키고 싶다면 href="#content"로 변경하면 됨.

img src=./images/파일이름 = 업로드한 파일이름으로 수정해 주세요.

 

※ px 대신 % 값으로 지정해도 됩니다. 만약, bottom: 50%; right:50%; 로 지정하면 화면 정중앙에 설치됩니다.

※ 이미지 대신 글자로 '위로' 이렇게 적용할 수도 있습니다. 이건 알아서 해 보시길...

※ 파일명 및 확장자는 대/소문자 구별해야합니다.

 

 

 

 

두번째 방법, Script를 이용한 부드럽게 스크롤되는 위로 버튼

 

두번째 방법인 스크립트를 이용한 방법도 당연히 그림파일은 미리 업로드 해 놓으셔야합니다.

그리고 스크립트를 이용해서 천천히 속도조절을 가능하게 하려면 스크립트 파일도 그림파일과 같은 방법으로 업로드 해야합니다.

 

 

▼ 업로드 해야할 스크립트 파일 다운▼

scroll_top.js

 

 

▼ 버튼 이미지와 위 scroll_top.js 파일을 업로드한 후, Skin.html의 <heda> ~ </head> 부분에 아래와 같은 코드를 넣어줍니다.

 

▼ 코드 다운로드

scroll_head.txt

 

 

<script type="text/javascript" src=./images/scroll_top.js ></script>

 

 


 

▼ 첨부파일 scroll_top.js 코드 세부(참고만 하세요.)

 

<script type="text/javascript">
function go_top(orix,oriy,desx,desy) {
var Timer;
if (document.body.scrollTop == 0) {
var winHeight = document.documentElement.scrollTop;
} else {
var winHeight = document.body.scrollTop;
}
if(Timer) clearTimeout(Timer);
startx = 0;
starty = winHeight;
if(!orix || orix < 0) orix = 0;
if(!oriy || oriy < 0) oriy = 0;
var speed = 7;
if(!desx) desx = 0 + startx;
if(!desy) desy = 0 + starty;
desx += (orix - startx) / speed;
if (desx < 0) desx = 0;
desy += (oriy - starty) / speed;
if (desy < 0) desy = 0;
var posX = Math.ceil(desx);
var posY = Math.ceil(desy);
window.scrollTo(posX, posY);
if((Math.floor(Math.abs(startx - orix)) < 1) && (Math.floor(Math.abs(starty - oriy)) < 1)){
clearTimeout(Timer);
window.scroll(orix,oriy);
}else if(posX != orix || posY != oriy){
Timer = setTimeout("go_top("+orix+","+oriy+","+desx+","+desy+")",15);
}else{
clearTimeout(Timer);
}
}
</script>

 

※ 만약 스크롤 속도를 조절하려면 scroll_top.js 파일을 메모장으로 열어서 var speed = 7; 에서 7을 변경하시고 업로드 하시면 됩니다.

※ 숫자가 작을 수록 버튼을 눌렀을 때 스크롤되는 속도가 빨라집니다.

 

 

 

 

▼ <head> 태그 사이에 스크립트를 넣은 다음은 아래의 코드를 <body> ~ </body> 사이에 넣어주면 됩니다.

 

소스코드 다운 -> scroll_body.txt

 

<!-- Top 버튼 -->
<div style="display:scroll;position:fixed;bottom:5px;right:5px;">
<a onclick="go_top();" title=Top><img src=./images/up-arrow.png ></a>
</div>
<!-- Top 버튼 -->

 

※ 코드설명 생략합니다. 첫번째 코드설명 보시고 수정하시면 됩니다.

※ 파일명 및 확장자는 대/소문자 구별해야합니다.

 

 

 

 

 

세번째 방법, jQuery 플러그인을 이용한 방법

 

※ jquery 와 소셜댓글 라이브리(LiveRe)는 동시에 사용할 수 없습니다. 둘 중 하나만 사용하셔야 세번째 방법이 먹힙니다.(2013.05.05 추가)

 

세번째 방법인 jQuery를 이용한 방법도 당연히 그림파일은 미리 업로드 해 놓으셔야합니다.

그리고 아래 첨부 zip 파일을 다운 받으셔서 압축을 풀면 jquery.scroll.pack.js 와 jquery.easing.js 두개 파일이 나옵니다.

이 두개의 파일도 업로드 하세요.

 

두 js 압축파일 다운 ▼

Scroll_Top.zip

 

 

 

▼ 두 개의 스크립트 파일 업로드가 끝났으면, 이제 코드를 넣어야겠죠?

   먼저 Skin.html 에 두개의 코드를 넣어야하는데 둘다 </body> 바로 앞에 넣으면 되니 간단합니다.

 

 

1. Script 로드를 위한 코드 다운 ▼

 jQuery_script.txt

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="./images/jquery.scroll.pack.js"></script>
<script src="./images/jquery.easing.js"></script>
<script>
//<![CDATA[
$(function(){$("#toTop").scrollToTop({speed:1000,ease:"easeOutBack",start:400})});
//]]>
</script>

 

※ 블로그에 라이브리(LiveRe)를 쓰신다면 제일 윗 줄 jquery 줄은 삭제하셔야 합니다. (라이브리와 jquery 충돌로 작동하지 않을 수 있습니다.)

       

 

 

2. 버튼 삽입을 위한 코드 다운 ▼

 jQuery_body.txt

 

<a id="toTop" href="#"><img src="./images/top.png" alt="맨 위로" /></a>

 

※ 버튼 이미지 파일이름 잘 확인하세요!!(대/소문자 구별합니다.)

 

  ※ 위 두개의 코드를 그림처럼 </body> 태그 바로 앞에 넣으시면됩니다.

      위 스샷과는 첨부된 코드는 약간 다르니 착오없으시길 바랍니다. 저는 jquery 1.9.1을 업로드 해버려서 스샷처럼 되어 있는거에요.

 

 

 

▼ 코드 설명

 

speed = 버튼 누르면 올라가는 스피드

ease = 스크롤 효과

start = 버튼이 나타나는 위치, 현재는 400px 내려오면 버튼이 나타납니다. '0' 이면 항상표시됨.

 

 

 

▼ 이제 버튼의 스타일을 지정해줄 차례입니다.

   style.css 가장 아래에 아래 코드를 넣어주세요.

 

style.css에 넣을 코드 다운 ▼

 jquery_css.txt

 

/* Top 버튼 설정 */
#toTop{background:none;position:fixed;bottom:5px;right:5px;cursor:pointer;text-decoration:none;}

 

 

 

  ※ bottom 과 left 옆의 px 숫자를 조정해가며 위치조정하세요.

 

 

 

위로버튼(TOP버튼) 잘 넣으셨나요?

간단한 일인데도 초보자를 위해 쉽게 풀려고하니 이게 어디까지 가야할지 잘 모르겠군요. ㅠㅠ

아무튼 이렇게 설치해도 안되는 분들은 대부분 그림이 엑박으로 뜬다고 하시는 분들이 많을텐데요,

그림파일 경로 잘 확인해 보시고요, 파일명과 확장자 대/소문자 잘 확인하세요. (경로는 절대경로, 상대경로 모두 가능)

 

혹시 안되시면 댓글 달아주세요.

 

 


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

이미지 맵

태그

언젠간날고말거야

언젠간날고말거야™의 여행블로그. 국내여행기, 해외여행기, 영화리뷰 등을 다룹니다.

    ✔ '블로그&IT/블로그' 카테고리의 다른 글

    티스토리툴바