┏━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━
┃０００１┃홈페이지　ＴＯＰ　버튼　＋　응용
┗━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 서문:

TOP 버튼을 구현하는 방법은 상당히 여러 가지가 있습니다만, 그 중에서 가장 많이 쓰이는 방법은 <a href="#">TOP</a> 이라 생각합니다. 여러 가지 이유가 있겠지만, 역시 간단하는 것 때문이겠죠.

일반적인 TOP버튼이라면 <a> 태그를 이용하는 것이 효율적이겠지만, JavaScript를 이용해서 TOP 버튼 구현하게 되면, 여러 가지 효과를 줄 수 있기 때문에, 조금 더 멋진 사이트를 만들 수 있게 됩니다.

아래 소스는 scroll 함수를 이용해서 구현한 TOP 버튼, 그리고 그 응용작들입니다.


┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 예제: http://edene.com/nzeo/java/?no=0001&mode=example


┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 소스: http://edene.com/nzeo/java/?no=0001&mode=source

<script type="text/javascript">
<!--
        function to_top()
        {
                scroll (0, 0);
        }

        function to_bottom()
        {
               var maxy = document.body.scrollHeight;
               scroll (0, maxy);
        }

        function to_top_constant()
        {
               var x = document.body.scrollLeft;
               var y = document.body.scrollTop;
               var speed = 1;
  
               while ((x != 0) || (y != 0)) {
                       scroll (x, y);
                       x -= speed;
                       y -= speed;
                       if (x < 0) x = 0;
                       if (y < 0) y = 0;
               }
               scroll (0, 0);
        }
  
        function to_bottom_constant()
        {
               var x = document.body.scrollLeft;
               var y = document.body.scrollTop;
               var maxy = document.body.scrollHeight;
               var speed = 1;
  
               while ((x != 0) || (y != maxy)) {
                       scroll (x, y);
                       x -= speed;
                       y += speed;
                       if (x < 0) x = 0;
                       if (y > maxy) y = maxy;
               }
               scroll (0, maxy);
        }
  
        function to_top_smooth()
        {
                var x = document.body.scrollLeft;
                var y = document.body.scrollTop;
                var speed = 1;
  
                while ((x != 0) || (y != 0)) {
                        scroll (x, y);
                        speed += (speed * speed / 100);
                        x -= speed;
                        y -= speed;
                        if (x < 0) x = 0;
                        if (y < 0) y = 0;
                }
                scroll (0, 0);
        }
  
        function to_top_bounce()
        {
               var x = document.body.scrollLeft;
               var y = document.body.scrollTop;
               var speed = 1;
               var bounce = 300;

               while ((x != 0) || (y != 0)) {
                       scroll (x, y);
                       if (speed < 5) speed += (speed * speed / 100);
                       x -= speed;
                       y -= speed;
                       if ((y < 0) && (bounce > 50)){
                              while ((y != bounce)) {
                                      scroll (x, y);
                                      speed -= (speed * speed / 100);
                                      x -= speed;
                                      y += speed;
                                      if (x < 0) x = 0;
                                      if (y > bounce) y = bounce;
                              }
                              scroll (0, bounce);
                              bounce /= 1.5;
                       }
                       if (x < 0) x = 0;
                       if (y < 0) y = 0;
               }
               scroll (0, 0);
        }
//-->
</script>


┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 적용:

자바스크립트는 <a> 태크를 이용해서 연결해줄 수도 있지만, 이벤트를 이용해서 부르는 것이 더 효율적입니다.
예: <span onclick="to_top();">↑TOP</span>

위와 같이 클릭했을 때 함수를 부르게 되는 것이죠.
<span> 태그 외에도 <font>, <div>, <p>, <img> 등 거의 모든 태크에 적용이 가능합니다.
예: <img src="top.gif" onclick="to_top();"></img>

하지만 <a> 태그가 아니면 하이퍼링크로 처리되지 않기 때문에 마우스포인터가 손으로 변하지 않습니다.
따라서 스타일 속성을 조금 건들여주시면 됩니다.
예: <span onclick="to_top();" style="CURSOR: hand">↑TOP</span>

위와 같이 하시면 TOP위에 올렸을 때에, 마우스포인터가 손으로 변하게 됩니다.
물론 다른 태크에도 적용이 가능합니다.
예: <img src="top.gif" onclick="to_top();" style="cursor:pointer"></img>


┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 알림:

소스에는 총 6개의 함수가 있지만, 아마 실제로 쓰실 것은 1, 2개 정도일 것입니다. 쓰지 않는 함수의 경우는 삭제하고 사용하세요.

소스페이지에 가시면 자세하게 주석을 달아두었으니, 이해가 안되시는 분들은 참고하도록 하세요.