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

<맨 위로 이동버튼 (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/블로그 다른 글

    댓글 39

      • 천천히 따라하니까 잘 적용되네요^^ 감사합니다!!
        다시 확인해 보니까요
        창 크기가 조절되면, 아이콘도 같이 포스트내용쪽으로 따라 들어오드라구요; 어찌해야 하는지 궁금합니다;

      • 그건 스킨에 따라 조금씩 다른데요, 스킨에 맞는 자리를 찾아야됩니다. 그런데 content에 넣으면 본문을 어떻게 해도 가리기때문에 side에 두거나 왼쪽으로둬야햐는데 왼쪽으로 고정은 제 강좌중 플로팅배너 보시고따라해보시고요, 오른쪽도 마찬가지로 똑깥이 하면됩니다. 그런데 오른쪽 중에서도 제 플로팅 광고(따라다니는 다음뷰 인기글과 광고)처럼 아래에서 위로 올라오지않고 특정 위치에서 움직이게 하려면 전혀다른 스크립트를 써야해서 그건 다음에 올려볼께요.

      • 고정이 아니네요 ^^;;
        브라우저크기에 따라 본문 덥칩니다.

      • 첫번째 방법은 블로그 고정이 아니라 화면고정이라 화면을 움직이면 그 화면에 따라 움직이고요, 나머지는 자리 잘 잡으시면 지금 제 블로그처럼 자리 딱 잡고 있답니다. ^^* 스킨마다 달라서 자리는 직접 여기저기 넣어찾아야하는데요, 귀찮으시면 맨위로 버튼이 들어있는 div 을 position:relative 속성을 가진 div로 한번 감싸주면 됩니다.

      • 두 번째 스크립트 이용해서 'Top 버튼' 을 설치했습니다
        하나 질문할게 있습니다
        마우스를 탑버튼 이미지에 올려놓으면 'Top' 이라고 설명은 뜨는데
        마우스가 링크 선택할 때처럼 변하지 않네요
        아무 것도 선택하지 않은 상태의 그 모양입니다
        탑버튼 누를 때도 링크 누를 때처럼 마우스커서가 변하게 하려면 어떻게 해야 할까요?

      • style 에 cursor:pointer; 를 주시면 됩니다.
        예를들어 원래 코드가 아래라면
        <div style="display:scroll;position:fixed;bottom:5px;right:5px;">

        아래 로 cursor:pointer; 를 추가하면 됩니다.
        <div style="display:scroll;position:fixed;bottom:5px;right:5px;cursor:pointer;"> 이렇게 바꾸면 됩니다.

      • 와 댓글 빨리해주셨네요
        알려주신 방법 적용했는데 아주 잘 나옵니다
        감사합니다~

      • 저도 블로그에 드디어 2번째 방법으로 달았습니다. 감사합니다.^^
        이건 그냥 여쭙는 건데 버튼이 안보이다가 어느정도 스크롤하면 짜안하고 나타나는건 좀 복잡하겠죠? 참고로 전 초보 블로거입니다.^^ 감사합니다.

      • 본문 잘 보시면, 세번째 jquery를 이용한 방법이 짠~하고 나타나는 겁니다. ^^*

        그리고, 영어 스팸댓글이 많아 차단시켜놨더니, top쓰신다고 고생하셨네요.
        본의 아니게 댓글 여러 번 쓰게 해서 죄송합니다.

      • ㅎㅎㅎ 그런것도 알수 있군요. 챙피~
        감사합니다^^

      • 님 영어 스팸쫌 풀어주시면 안되나요 질문이 안올라가는데 ㅠㅠ..
        border="0" 이거는 무슨 뜻인가요?
        소스를 롤오버?로 수정하게 됐는데 이걸 어디넣어야 할 지 몰라서요

      • border="0" 는 그림의 테두리를 없애라는 태그입니다.
        스킨 자체적으로 그림의 테두리 두께를 준 경우에는 모든 그림파일이나 아이콘에 테두리가 생기기 때문에 넣어 두시는 게 좋습니다.
        그리고 댓글에 영어를 못쓰게 해둔건 아니고요, http:// 만 못쓰게 되어 있습니다. 참고하세요.

    *

    *

    이전 글

    다음 글