티스토리 블로그 오른쪽에 '맨 위로' 단추 달기

2010. 9. 11. 22:13IT/Tistory Tips

블로그를 돌아다니다 보면 화면 오른쪽 아래에 '맨 위로'나 'Top', 또는 화살표 아이콘이 있는 것을 볼 수 있다. 한참 글을 읽다가 그 아이콘만 클릭하면 블로그 맨 위로 이동한다. 보통 블로그의 긴 글을 읽고 난 다음 화면 위쪽의 사이드바를 찾아가려면 마우스 휠을 한참 돌리거나 스크롤 막대를 클릭해서 이동해야 한다. 그러나 이 아이콘이 있으면 한순간에 '뿅' 하고 이동한다. 긴 글을 자주 쓰는 블로거라면 한번 시도해보자.

일단 같은 페이지에서 특정 위치로 이동하는 원리를 살펴보면 div나 a name 태그로 특정 위치의 명칭을 지정하고 그다음 a href에 경로 대신 "#위치 이름"을 입력해서 해당 글자나 그림을 클릭하면 지정한 위치로 이동하게 하는 방식이다. 간단히 이야기하면 링크를 거는데 다른 사이트가 아닌 현재 페이지의 특정 위치로 링크를 건다고 생각하면 된다. 정리하면 이미지를 올리고 그 이미지에 링크를 거는데 그 링크 대상이 특정 사이트가 아니라 같은 페이지의 특정 위치라는 이야기다.

그런데 이렇게 그냥 링크만 걸면 아이콘을 클릭했을 때 정말 지정한 위치로 뿅 하고 날아간다. 1초도 안 걸린다. 순식간.

앗, XX네 블로그 가서 눌러보니 쓔~우~웅~ 하면서 천천히 멋지게 이동하던데!!!

그건 여러 방법이 있는데 다른 분이 미리 만들어둔 자바스크립트를 사용하면 간단히 해결할 수 있다. 전체를 정리해보면

1. 그림을 올리고
2. 천천히 이동하도록 하는 자바스크립트를 올리고
3. 스킨을 수정한다. 끝!!

일단 사용할 그림을 찾아서 올려야 한다. G글이나 N이년에 무료 아이콘을 검색해서 원하는 그림을 선택한다. 아이콘은 보통 ICO나 PNG 파일로 배포될 텐데 PNG 파일을 내려받는다. 그다음 smoothscroll.js 파일을 내려받는다. 이제 티스토리 관리자로 이동해서 [스킨] - [HTML/CSS 편집]을 클릭한다. HTML/CSS 편집 창이 나타나면 파일 업로드 탭으로 이동하고 [파일 업로드] 단추를 눌러서 준비한 그림과 smoothscroll.js 파일을 올린다.


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

자, 이제 절반은 끝났다. 이제 HTML/CSS 탭으로 이동한 다음 skin.html을 수정한다. 위의 붉은 글씨 부분을 </body> 바로 위에 붙여 넣는다. (이미지의 >/head>는 무시) 앞에서 올린 smoothscroll.js를 사용하겠다고 선언하는 것이다. 이 줄이 들어가지 않으면 클릭하는 순간, 뿅 하고 순간 이동이다. 부드럽게 스르륵 움직이려면 이 줄을 꼭 추가해야 한다. (smooth scroll을 구현하는 방식은 다양하지만, 그냥 그 중 하나를 선택한 것일 뿐이다.)

이제 skin.html을 좀 열심히 들여다봐야 한다. </head> 조금 아래를 찾아보면 <body ~~~~~~> 바로 아래 <div id=XXXXXX>라는 부분이 있을 것이다. 위 그림에서는 <div id="header">라고 되어 있다. 여기서 id= 뒤에 있는 header가 이 위치에 대한 주소다. 또 조금 아래를 보면 <div id="top">이라고 된 부분도 보일 것이다.

위의 소스를 살펴보면 내 블로그 스킨에서 header와 top의 위치는 위 그림처럼 규정되어 있다는 것을 알 수 있다. 이것이 이동할 위치가 되는 것이다. 태그를 모르더라도 일반적으로 페이지 제일 위가 header고 글 제목부터가 content, 페이지 가장 아래가 footer다. top은 스킨에 따라 있을 수도 없을 수도 있다. 그냥 제일 위로 가는 기능을 지정하려면 header로 하면 대부분 OK다.

여기서 잠깐, 젤 위로 가는 건 #을 써서 <a href="#">TOP</a>이라고 하면 간단히 해결되는데 왜 복잡하게 스킨 파일을 뒤지고 있느냐고? 앞의 TOP이란 글자를 클릭해보면 안다. 단순한 이유다. #만 입력하면 맨 위로 가지만 smooth scroll이 안된다. 다른 방법이 있겠지만, 나는 모르니 pass.

이제 skin.html의 맨 끝으로 이동한다. 끝 부분을 잘 찾아보면 <div id="footer">란 부분이 있고 거기서 계속 따라 내려가다 보면 </div>가 나오면서 footer 부분이 닫히는 것을 확인할 수 있다. 스킨에 따라선 <!--/footer -->와 같은 주석 처리로 footer가 끝났다고 표시하기도 한다. 바로 그 아래에 다음의 내용을 추가하면 된다.

<div id="topscroll" style="position: fixed; bottom: 10px; right: 10px; cursor: pointer; opacity: 0.5">
<a href="#header"><img src="그림 전체 경로" style="width:32px; height:32px"/></a>
</div>

위의 태그 내용을 간단히 살펴보면, div id는 이 부분을 구분 짓는 명칭을 지정하는 것이다. 원하는 이름을 입력하면 되는데 이전에 나왔던 header나 content, footer 등 겹치는 이름은 안된다. 그다음 style은 div로 지정할 영역의 스타일을 설정하는 부분이다. position: fixed; 는 스크롤 할 때 화면과 같이 스크롤되는 것이 아니라 계속 똑같은 자리에 고정한다는 의미다. 마치 웹사이트가 아니라 모니터에 붙여놓은 것처럼 스크롤을 해도 항상 같은 자리를 유지한다. bottom: 10px; right: 10px;는 아래에서 10픽셀, 오른쪽에서 10픽셀 떨어진 위치에 표시한다는 의미다. 즉, 화면 오른쪽 구석에 위치하게 된다. 만약 bottom, right 대신에 top : 200px; left: 30px; 이렇게 입력하면 왼쪽 위에 자리 잡는데 화면 꼭대기에서 아래로 200픽셀, 왼쪽 끝에서 30픽셀 떨어진 곳에 표시한다.

cursor: pointer; 는 지정한 위치에 마우스 커서를 올렸을 때 마우스 커서 모양이 처럼 변하게 하는 것이고 opacity: 0.5는 그림의 투명도를 50%로 지정하는 것이다. 지금 화면 오른쪽 아래를 보면 위에서부터 네 개의 그림이 나열되어 있는데, 위의 세 가지는 opacity: 0.5;이고 마지막은 opacity: 0.7;이다. 단, opacity는 IE에선 적용되지 않으니 IE는 opacity를 적용하면 그림이 뭉게지는 현상이 나타나고 FF나 오페라, 크롬, 사파리 등에서는 흐릿하게 표시되는 것을 확인할 수 있다.

<a href="#header">는 header라는 id를 갖는 부분까지 이동한다는 의미인데 앞에서 이야기한 것처럼 보통 화면 맨 위로 이동하게 된다. 그다음은 아이콘으로 사용할 그림을 표시하는 부분이다. <img src="그림 전체 경로" style="width:32px; height:32px"/>라고 되어 있는데, 그림 전체 경로는 위 그림처럼 스킨 수정 화면에 올린 그림 파일을 선택하고 왼쪽의 미리 보기 화면에 마우스 오른쪽 단추로 클릭해서 [그림 주소 복사]를 하면 쉽게 알아낼 수 있다. 상대 경로(,/images/top.png 등)를 입력하면 제대로 인식되지 않을 수 있으니 반드시 그림 전체 경로를 입력한다. 그 뒤의 width:32px; height: 32px;는 그림의 너비와 높이이다. 그림의 가로와 세로를 입력하면 된다. 그림 크기를 조정하지 않으려면 입력하지 않아도 상관없다. </a>와 </div>는 태그를 닫는 부분으로 반드시 빠뜨리지 말고 입력해야 한다.

이제 수정한 스킨을 저장해야 한다. 스킨 수정 화면을 아래로 내리면 [미리 보기]와 [저장] 단추가 있다. 여기서 [저장]을 누르고 저장하겠느냐는 물음에 [예]를 선택한다. 저장하지 않으면 지금까지 작업한 내용이 다 날아가니 주의한다. 스킨을 저장하고 다시 블로그로 돌아와 보면 화면 오른쪽 또는 사용자가 지정한 위치에 새로운 그림이 생긴 것을 확인할 수 있다. 이 그림에 마우스를 올리면 마우스 커서가 손가락 모양()으로 변하고 클릭하면 화면 맨 위로 또는 지정한 위치로 스르륵 이동한다. 지금 이 글 화면 오른쪽의 그림들을 클릭하면 특정 위치로 이동하는 것을 확인할 수 있다.

모든 글에 적용하지 않고 특정 글에 적용하려면 스킨을 수정하는 대신 글을 작성할 때 HTML 방식으로 전환하고 위의 태그를 그대로 입력하면 된다. 그럼 이 글에서처럼 블로그 전체에는 적용되지 않는 다른 위치로의 이동 아이콘이 해당 글을 읽을 때만 표시된다. 또 이동하는 중에 아이콘을 다시 클릭하면 속도가 느려진다. 클릭할수록 점점 느려진다.

  • 프로필사진
    Favicon of https://min-blog.tistory.com BlogIcon 백전백승2010.09.11 22:28 신고

    저도 이 글과 관련됐는데 자세한 설명은 못하고 여기의 트랙백을 보냈으니 같이 보내 주세요. 안 보내주시면 악플남길거예요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 00:09 신고

      악플이 두려워서는 아니고@@ 글이 넘 좋아서 바로 트랙백 보냈습니다^^
      jQuery 너무 어려워요 ㅎㄷㄷ;;;;
      열심히 공부해야겠어요 ~

  • 프로필사진
    알 수 없는 사용자2010.09.11 23:04

    정말 신기하네요...~~ 역시나 저는 귀차니즘으로 인해 접었다 폈다를 이용하겠지만... --;;

    요즘은 마우스에 스크롤 기능은 다 되니까요 ㅎㅎ...

    하는 방식은 스킨 꾸미기와 동일하네요...

    파일 업로드, css/html 수정 하는 귀찮은 작업 ㅋㅋ...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 00:11 신고

      넵, 귀찮은 과정인건 분명한데 중독인지 자꾸 하게 되네요^^;;
      긴 글 읽을 땐 스크롤이 불편하더라구요. 진짜 긴 글은 스크롤만 10초 이상 해야 할 때도 있으니 그럴 땐 요런게 편할 것 같아요.
      젤 편한건 글 접기 같구요^^ 전 pdf 로 저장할 때 접힌 글 내용이 제대로 표시되지 않아서 요즘 되도록 접지 않지만, 예전에 모든 글을 다 접어서 쓸 때 더 편했던 것 같기도 함니다^^

  • 프로필사진
    Favicon of https://alllink.tistory.com BlogIcon 링크정보2010.09.11 23:35 신고

    투명도는 style="opacity:0.5;filter:alpha(opacity=50)" 이렇게 해보세요. IE에서도 될 거예요.

    이동버튼 만드는 법 다른 글도 트랙백 보냅니다.
    http://dis1.tistory.com/211

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 00:17 신고

      좋은 정보 감사합니다~
      그런데 filter: alpha(opacity='50')을 적용하니 반투명이 되긴 하지만, 그림이 일부 뭉게지네요^^;;
      다음에 IE에 적용되는 다른 방법이 있는지 좀 찾아봐야겟습니다^^
      저도 트랙백 보냈습니다~~
      주말 잘 보내세요!

    • 프로필사진
      Favicon of https://alllink.tistory.com BlogIcon 링크정보2010.09.12 14:25 신고

      필터를 div style에 말고 img style에 넣어보세요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 16:39 신고

      div img 모두 마찬가지로 뭉게집니다 ㅠㅠ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)으로 해봐도 마찬가지고 IE에만 조건을 걸어도 똑같고 혹시나 하는 마음에 이미지를 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='image.png', sizingMethod='scale');로 불러와도 상태는 다르지만, 이상한건 똑같네요 ㅎㅎ
      일단 머리를 좀 식히면서 고민해봐야 겠습니다^^
      신경써주셔서 고맙습니다!!

  • 프로필사진
    알 수 없는 사용자2010.09.12 05:40

    멋지게 만드셨네요.
    저도 예전에 만들어 놨지요. ^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 16:40 신고

      은근 재미난것 같아요^^ 사실 뭐 재미보단 댓글 달고 나서 페이지 위로 이동할 때 귀찮아서 제가 쓰려고 만들어 뒀어요~

  • 프로필사진
    Favicon of http://blog.naver.com/yamchejihye BlogIcon 의진맘한지혜2010.09.12 06:42

    오~~ 신기해요~~~
    네이버를 쓰는지라 상관이 없겠지만...
    화살표를 누르니 스르륵~~ 맨위로 가는걸요... ㅋㅋ
    잼나요~~~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 16:51 신고

      저도 블로그에 설치한 후로 쓸 필요 없을때도 그냥 쓰고 있습니다. 재미있더라구요 ㅎㅎ

  • 프로필사진
    Favicon of http://blog.daum.net/eggyun BlogIcon 달걀2010.09.12 10:12

    푸헬... 저도 그냥 갖고 놀기만...
    은근 재밌는데요~ 이런 화살표들 종종 봤는데 그냥 지나쳤었거든요.
    담부턴 적극 활용해야겠어요.

    아 근데... 갖고 놀다보니 레뷰추천박스가 사라지네요.
    추천부터 하고 놀아야겠구나~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 16:54 신고

      글 다 읽거나 댓글 쓰고 나서 카테고리로 다시 이동하고 싶을때 아주 유용하답니다~ 보통 긴 글 읽고 난 다음 사이드바 찾아가려면 한참 올라가잖아요~
      레뷰 추천 고맙습니다^_^

  • 프로필사진
    알 수 없는 사용자2010.09.12 10:18

    좋은 정보네요. 잘보고 갑니다 ^^ 즐거운 주말 보내세요.

  • 프로필사진
    Favicon of https://wordmaker.tistory.com BlogIcon 연어술사2010.09.12 11:31 신고

    역시나 유용한 정보... 저는 글재주가 없어서 길을 길게 못 쓰는지라.... 나중으로 패스해 두겠습니다~^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.12 17:02 신고

      유용하다고 생각해 주시니 고맙습니다@.@
      글 재주 있으시잖아요!!
      남은 주말 잘 보내세요^_^

  • 프로필사진
    Favicon of https://macho11.tistory.com BlogIcon macho112010.09.28 21:51 신고

    좋은정보 감사 합니다^^
    좋은 하루되세요^^

  • 프로필사진
    Favicon of https://negativeg.tistory.com BlogIcon Good_Speed2011.01.07 03:22 신고

    좋은 정보 감사합니다. 지금 바로 적용해 봐야겠네요^^

  • 프로필사진
    Favicon of https://wincomii.tistory.com BlogIcon 윈컴이2011.01.09 14:18 신고

    감사합니다 :)

  • 프로필사진
    알 수 없는 사용자2011.01.23 18:32

    헛 좋은정보다!ㅋㅋ 성공했슴다. 감사합니다~^^ 그런데 나눔고딕은 /ㅁ/ 잘안되네요ㅜㅜ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.02.08 11:51 신고

      성공하셨다니 다행입니다. 나눔고딕은 글꼴 적용 이야기하시는것 같은데 파일 크기가 커서 불러오는데 시간이 좀 걸려서 그런게 아닌가 싶기도 하네요.

  • 프로필사진
    이글루저2011.04.13 13:19

    이글루도 적용될까요...ㅠㅠ
    이리저리 해봐도 원하는 위치에 고정되게 안나오네요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.04.13 19:08 신고

      이글루스는 자바스크립트를 사용할 수 없으므로 티스토리처럼 smooth scroll 기능을 추가할 순 없습니다.

      만약 이글루스에서 '페이지 맨 위로' 기능을 사용하려면 스킨 편집 화면에서 [전문가용 편집] - [html/css 편집]으로 이동한 다음 html을 선택합니다.

      그다음 footer 아래나 기타 적당한 위치에 아래의 소스를 입력하세요.

      <div id="topscroll" style="position: fixed; bottom: 20px; right: 20px; cursor: pointer;opacity:0.5">
      <a href="#"><img src="그림 파일 경로" width="그림 너비" height="그림 높이" /></a>
      </div>

      만약 이미지에 반투명 효과를 적용하지 않으려면 opacity:0.5를 삭제하세요. 또 bottom, right 부분의 20px을 바꾸면 그림 위치를 조정할 수 있습니다.

      http://circlash.egloos.com

      여기 방문하시면 페이지 오른쪽 아래에 적용된 것을 확인하실 수 있습니다.

      만약 계속 위치 지정이 안되시면 자세한 증상이나 적용되지 않는 블로그 주소를 알려주시면 한 번 확인해보겠습니다.

    • 프로필사진
      2011.04.15 12:44

      비밀댓글입니다

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.04.15 21:13 신고

      아, 확인해보니 1.0 스킨을 사용하시는 것 같네요.
      같은 스킨을 구해서 정확히 확인해보진 못했지만, 1.0 스킨에선 내용 구성 자체를 table 태그를 사용해서 머릿글, 본문, 사이드 바 외의 영역에 div를 지정했을 때 IE에서 제대로 표시되지 않는 것 같습니다. 인터넷 익스플로러 외 다른 브라우저에선 제대로 표시되는데 IE에서 확인하니 정말 파란 테두리와 함께 페이지 왼쪽 하단에 고정되는군요.

      일단 주말동안 좀 더 테스트해보고 알아본 다음 다시 답변 드리겠습니다. 아, 그리고 메모장 때문은 아닌 것 같습니다. 메모장을 사용하지 않는 스킨에서도 같은 문제가 발생하네요. 조만간에 다시 답변 드리겠습니다^^

    • 프로필사진
      yim2011.04.19 13:24

      신경써주셔서 너무 감사합니다
      블로그에 좋은 정보가 참 많은거 같아요!
      감사합니다!

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.04.20 14:27 신고

      네, 나중에 좋은 방법이 생각나면 다시 찾아뵙겠습니다^^
      봄철 감기 조심하세요~

  • 프로필사진
    알 수 없는 사용자2011.10.04 11:28

    많은도움 되었습니다. 고맙습니다.

  • 프로필사진
    Favicon of https://tymj.tistory.com BlogIcon 창고's2012.01.16 23:52 신고

    감사함니다 엄청나게 엄청네게 많은 도움이됬어여 ㅎㅎㅎㅎ

  • 프로필사진
    Favicon of https://quarker.tistory.com BlogIcon Uvan Osper2012.01.29 16:41 신고

    감사합니다ㅎㅎ 덕분에 블로그에 위 아래 이동 버튼 달았어요!
    근데 위나 아래 버튼 누르면 주소창에 #header 등등... 이동한 곳 div class 이름이 뜨는데, 어쩔 수 없는 건가요? 상관은 없는데 조금 거슬리네요 ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.01.30 12:37 신고

      네, 앵커(anchor)로 이동하는 것이라 어쩔 수 없습니다^^
      제가 사용하는 방법은 아니지만, 만약 앵커 요소를 사용하지 않고 이동할 수 있다면 주소창에 나타나지 않게 할 수 있을 것 같군요^^

  • 프로필사진
    Favicon of https://jhhus.tistory.com BlogIcon 제임스라이언2012.04.26 08:38 신고

    창을 최소화 할때와 최대화 할때의 버튼 위치가 계속 바뀌는데요 고정시키는 방법이 없는건가요? 그리고 버튼을 눌렀을때 생각보다 빨리 올라가는데 좀 천천히 올라가게 하는 방법을 알려주세요

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.04.28 17:03 신고

      화살표는 일단 웹브라우저 창 안에서만 사용할 수 있습니다. 그리고 위 예제에서 화살표는 오른쪽 아래를 기준으로 위치를 잡기 때문에 창을 최소화나 최대화할 때 오른쪽 아래 부분이 같은 위치가 아니라면 위치가 바뀔 수밖에 없습니다. 창 자체의 위치가 변하면 어쩔 수 없을 것 같은데요.

      그리고 속도를 조정하려면 다른 JavaScript를 사용하시는게 편하실 겁니다. 구글에서 검색해보시면 시간 조정 및 다른 옵션을 사용할 수 있는 화살표를 찾을 수 있을겁니다^^

    • 프로필사진
      Favicon of https://jhhus.tistory.com BlogIcon 제임스라이언2012.04.29 22:55 신고

      주인장님 블로그에는 최대화, 최소화 해도 화살표가 그대로이시더라구요.. 위치가 바뀔수밖에 없다는데 주인장님 블로그는 다른 소스를 사용하신건가요? 위치가 그대로네요

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.04.30 04:39 신고

      아, 제가 댓글을 잘못 이해했네요;; 최대화 최소화할 때마다 버튼 위치가 바뀌신다구요? 음,,,,

      사실 지금 사용하는 주황색 화살표는 게시글 설명에 있는 회색 화살표와는 다른 소스를 사용하는 겁니다. 이 화살표 사용하시면 속도 조정도 할 수 있고 효과 적용 및 화살표가 나타나는 위치도 정할 수 있습니다. 원래 소스를 배포하던 사이트가 없어져서 따로 공개하지 않았는데 소스 및 사용방법 새로운 게시글로 올려드리겠습니다^^

      혹시 그걸로도 안되면 다시 댓글 주세요~ 위치가 어떻게 바뀐다는 말씀이신지 잘 모르겠어서요^^;

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.05.03 23:19 신고

      http://circlash.tistory.com/653

      위 게시글에 jQuery 사용한 화살표 글 올렸습니다. 한번 적용해보세요~ 제가 지금 사용하는 주황색 화살표입니다^^

  • 프로필사진
    Favicon of https://aclass.tistory.com BlogIcon goldiva2012.12.15 04:01 신고

    야호~ 성공했네요!