Home 게시판 공부 게시판

✔ 뷰어로 보기

웹 프로그래밍

2008.09.26 22:25

스크롤 따라다니는 위로,아래로 화살표

JaeSoo

조회 수 5085 추천 수 0 댓글 0

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

막상 뭐라고 이름짓기 힘들군요 ㅋㅋㅋ

이곳에 적용된..왼쪽에 따라다니는 화살표 입니다.

클릭하면 최상위로 또는 최하위로 이동합니다.

아래남은 공간이 많으면 아래로.. 위에 남은공간이 많으면 위로... 알아서 이동하는 똑똑한 넘입니다.

익스에선..휙휙~ 이동하고 파폭에선 스르륵 이동합니다. (익스에선 사이트 환경에 따라 간혹 버벅이길래...)

본인의 사이트가 가벼워서...익스에서도 스르륵~ 이동되길 원하신다면...

  if (!document.selection)
  {
    ...
  }

위과 같은 if 구문을 벗겨내시면 됩니다.

설치는 간단히 아래 이미지태그와 스크립트를 원하는 곳에 넣어주시면 됩니다. (이미지는

)

position 이 absolute 이기때문에 태그상에서(html 코드에서) 넣어주신 위치에 바로 나옵니다만..

살짝 위치를 조정하고 싶으시면.. margin-left:-7px; 값을 조절하시면 가로 위치 이동 가능합니다.

세로 위치는 현재는 화면 중앙입니다만~ 상단이나..하단이나..이런대로 옮기시려면 최하단의

floater.style.top = (document.body.scrollTop + ((h-13)/2))+"px" ; 에서

-13 부분을 조절하시면 됩니다.

--이하 소스--

<img id="floater" title="위로/아래로" alt="up,down" onclick="autoUpDown();" src="updown_orange.gif" style="cursor:pointer; margin-left:-7px; position:absolute;" />
<script>
function back_top()
{
  var x = document.body.scrollLeft;
  var y = document.body.scrollTop;
  var step = 2;

  if (!document.selection)
  {
   while ((x != 0) || (y != 0)) {
     scroll (x, y);
     step += (step * step / 300);
     x -= step;
     y -= step;
     if (x < 0) x = 0;
     if (y < 0) y = 0;
   }
  }
  scroll (0, 0);
}

function back_bottom()
{
  var endx = document.body.scrollWidth;
  var endy = document.body.scrollHeight;
  var x = document.body.scrollLeft;
  var y = document.body.scrollTop;
  var step = 2;

  if (!document.selection)
  {
   while ((x != endx) || (y != endy)) {
     scroll (0, y);
     step += (step * step / 300);
     x += step;
     y += step;
     if (x > endx) x = endx;
     if (y > endy) y = endy;
   }
  }
  scroll (0, endy);
}

var floater = document.getElementById("floater");
window.onscroll = function () {
  var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
  var newTop = (document.body.scrollTop + ((h-13)/2));
  if (newTop > floater.parentNode.offsetTop)
  {
   floater.style.top = newTop+"px" ;
  } else {
   floater.style.top = floater.parentNode.offsetTop+"px" ;
  }