Tip&Tech/Web2007.08.09 01:55
* 본 팁은 PHP School, 지우, SGUMG님의 팁을 참고해 MissFlash가 최종정리한 것입니다.
* 퍼가실 때는 댓글로 퍼가시는 글의 원본주소를 남겨주시기 바랍니다. ^^;

지금까지 나온 "스크롤바에 따라 부드럽게 움직이는 Top버튼" 스크립트의 종류는 셀 수 없이 많습니다.

하지만, 대부분의 경우 다음과 같은 문제로 몇 가지 한계를 가집니다.
  1. 브라우저의 종류에 따라 안 될 때가 많다.
    최근 들어 느려터진 IE(인터넷 익스플로러)에 질려 FF(파이어폭스)로 바꾼 분들이 많을 겁니다. 그런데 IE에서는 문제없이 되던게 다른 브라우저에서는 먹통인 경우가 많습니다. 움직이는 Tob버튼도 마찬가지 입니다.
  2. 화면해상도에 따라 Top버튼의 위치가 달라진다.
    힘들게 Top버튼을 적용시켜도 해상도가 달라질 경우, Top버튼의 위치가 전혀 달라지는 경우도 많았습니다.
  3. HTML 표준 DTD를 넣었을 경우 자바스크립트가 제대로 작동하지 않는다.
    HTML파일에 아래와 같은 HTML 표준 DTD가 있을 경우, document.body.scrollTop값이 제대로 출력되지 않는 문제가 발생합니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. 자바스크립트를 붙여넣기가 너무 힘들다.
    HTML이나 자바스크립트에 익숙하지 않은 사용자에게는 힘들게 찾은 스크립트를 붙여넣는 것도 쉽지 않습니다.


지금부터 이 같은 문제들을 한 번에 해결할 수 있는 좋은 방법을 알려드리겠습니다.

A. 먼저 아래의 top.zip파일을 다운받은 후 압축을 해제합니다.


B. 다음으로 적당한 텍스트 편집기를 이용해 압축을 해제한 top.php파일을 엽니다.
아래 소스에서 빨간색으로 표시된 부분을 자신의 상황에 맞게 수정합니다.
<?
/*
* 본 파일은 PHP School(http://www.phpschool.com), 지우(http://www.ziwoo.net), SGUMG(http://blog.naver.com/sgumg)님의
팁을 참고해 MissFlash(http://blog.missflash.com)가 최종정리한 것입니다.

* 본 파일은 저작권 정보를 남겨두시는 한 아무 제한없이 사용하실 수 있습니다. :)
* 혹 다른 분의 저작권을 침해한 부분이 있을 때는 MissFlash(http://blog.missflash.com)에 알려주시기 바랍니다. ^^
*/
?>

<div id="divMenu" style="width:20px; height:20px; position:absolute;">
    <img src="http://top이미지경로/top.jpg" border="0" onClick="document.body.scrollTop=0;" style="cursor:pointer">
</div>
<script language="JavaScript">
<!--
function moveRightEdge() {
    var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
    yMenuFrom = parseInt(document.getElementById('divMenu').style.top,10);

    // Y축 위치 설정방법(상단으로부터 40픽셀을 의미)
    yMenuTo = document.body.scrollTop + 40;
    timeoutNextCheck = 500;
    if (yMenuFrom != yMenuTo) {
        yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
        if (yMenuTo < yMenuFrom)
        yOffset = -yOffset;
        document.getElementById('divMenu').style.top = parseInt (document.getElementById('divMenu').style.top, 10) + yOffset;
        timeoutNextCheck = 10;
    }
    setTimeout ("moveRightEdge()", timeoutNextCheck);
}
function setRightX() {
    // X축 위치 설정방법 1(가운데 정렬의 경우에 적용가능, 화면의 중심에서부터 410(800/2+10)픽셀 떨어진 위치를 의미)
    document.getElementById('divMenu').style.left = document.body.clientWidth/2 + 800/2 + 10;

    // X축 위치 설정방법 2(왼쪽 정렬의 경우에 적용가능, 800픽셀을 의미)
    // document.getElementById('divMenu').style.left = 800;
    moveRightEdge();
}
function setRightY() {
    document.getElementById('divMenu').style.top = document.body.scrollTop + 0;
    document.getElementById('divMenu').style.visibility = "visible";
    setRightX();
}
setRightY();
//-->
</script>
<script for="window" event="onresize">setRightX();</script>


C. 이제 Top버튼을 불러올 파일을 엽니다.
header.php나 footer.php와 같이 모든 페이지에 공통으로 적용되는 파일이 있다면 이것만 수정하면 한 번에 해결 되겠네요 ^^;


D. 적당한 곳에 아래 소스를 붙여넣습니다.
아래의 소스는 top.php와 Top버튼을 불러올 파일이 같은 폴더에 있는 경우를 가정한 것입니다. 만약 top.php과 이를 불러올 파일의 위치가 서로 다를 경우 top.php의 경로를 알맞게 수정해 줘야 합니다.
<? include "top.php"; ?>


이제 완료되었습니다. top.php파일과 수정한 파일을 업로드 한 후 테스트 해보시면 스크룰바의 위치에 따라 Top버튼이 부드럽게 움직이는 것을 보실 수 있습니다.
신고

이 글은 새로운 정보가 추가될 때마다 업데이트됩니다. 추천으로 아래 숫자에 1을 더해보세요. :)
RSS구독을 하시면 포스트를 배달해 드립니다. ▷ 한RSS 구독하기, 구글리더 구독하기

댓글을 달아 주세요

  1. <!DOCTYPE html PUBLIC "-//W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    표준 DTD 넣으니깐 안되는데요? 제가 잘못한건가 ㅜ_ㅡ

    2007.11.28 02:37 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 마일드

    뭐대단한거라고 저작권타령

    사파리 파폭오페라크롬 다안되더만

    2008.10.02 11:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 1. 대단하고 안하고와 저작권과는 별로 관계가 없어보이네요...

      2. 이 글은 다른 여러 블로거들의 글을 참고로 제가 수정한 것이라 다른 분들의 저작권도 중요하게 생각하구요...

      어쨋든 말씀감사합니다.

      개인적으로, OS, 브라우저별, 해상도별로 항상 일관되게 보이는 "움직이는 Top버튼"이 웹표준과 다소 거리가 있기에... 안되는 것 같습니다.

      2008.10.03 02:01 신고 [ ADDR : EDIT/ DEL ]
    • 마일드님은

      그냥 찌질해보이네요.

      2008.11.25 12:51 신고 [ ADDR : EDIT/ DEL ]
  3. J.yun

    좋은정보감사합니다. ^^ 이쁘게 적용했어요_ ^^

    2009.07.26 01:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 님짱

    감사합니다. 부드럽게 움직이는 소스는 많은데...
    님처럼 가운데를 기준으로 버튼 위치를 맞춰주는건 없었는데... 여기서 찾는군요. 왕추천~

    2010.10.16 11:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 사실 요즘에는 이런 소스들을 별로 많이 쓰지는 않는데... 어쨋든 도움되었다니 다행이네요~ ㅎㅎ;

      2010.10.24 01:16 신고 [ ADDR : EDIT/ DEL ]
  5. honny

    감사합니다~ 그런데 질문이 있는데요, 800/2 + 10 이 부분에서 800을 자기 컴퓨터 해상도의 가로크기를 넣어야하는건가요?
    제가 지금 1152*864 해상도를 사용중인데 top버튼을 가운데에서 450px떨어져있게 만들고싶거든요. 그러면 1152/2 + 450 이렇게 넣으면 되는건가요? 왠지 이렇게 넣으면 다른 해상도에서는 이상하게 나올 것 같아서요..^^; 이 글을 너무 늦게봐서 질문도 너무 늦은 것 같지만 답변부탁드릴게요~

    2011.01.31 09:16 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 아니요. 화면 해상도 크기는 자동으로 불러옵니다.

      설명에 쓴대로 450px 떨어지게 많들고 싶으면 그냥 아래와 같이 쓰시면 됩니다.

      document.body.clientWidth/2 + 450;

      2011.02.01 10:39 신고 [ ADDR : EDIT/ DEL ]


티스토리 툴바