스크롤에 따라 움직이는 버튼 스크립트

홈페이지에 적용할 top버튼을 만드는데 여러가지 방법들이 널려있다.

그러나 대부분은 스크립트들이 ie에서 정상작동하지만, 크롬이나 기타 브라우저에서 잘 작동을 안한다.

그래서 열심히 소스를 찾아봤는데 MissFlash(http://blog.missflash.com) 이분의 소스가 검색됐다.

이분건 ie, 크롬에서 정상 작동한다. 이미지경로, 버튼 생성될 위치등만 잘 조정하면 쉽게 사용가능하다.

단 한가지 삽질한게 있다면 표준 dtd를 넣었을 경우 작동을 안한다는거다.

위분 블로그에 친절하게 써있지만서도 대충 읽고 적용해본터라 반나절 이상을 삽질을 했다.

저작권정보를 남겨두면 제한없이 사용가능하다고 하니, 약간 변경해서 홈페이에 적용한 소스도 같이 올려봅니다.

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

<?

/*

* 본 파일은 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)에 알려주시기 바랍니다. ^^

*/

?>

<style type="text/css">

a {outline:none; select-dummy: expression(this.hideFocus=true);}

</style>

<div id="divMenu" style="width:20px; height:20px; position:absolute; z-index:100;"> 

<table width="70" height="70" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

<a href="#top"><img src="이미지경로" width="70" height="35" border="0"></a></td>

</tr>

<tr>

<td>

<a href="javascript:goBottom();"><img src="이미지경로" border="0" width="70" height="35"></a></td>

</tr>

</table>    

</div> 

<script language="JavaScript">

<!--

function goBottom(){

var scr = document.body.scrollHeight; //페이지의 길이를 체크

window.scrollTo(0,scr); //맨아래로

}

function moveRightEdge() {

var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;

yMenuFrom = parseInt(document.getElementById('divMenu').style.top,10);

// Y축 위치 설정방법(상단으로부터 40픽셀을 의미)

yMenuTo = document.body.scrollTop + 850;

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(가운데 정렬의 경우에 적용가능, 화면의 중심에서부터 오른쪽으로 10픽셀을 의미)

document.getElementById('divMenu').style.left = document.body.clientWidth/2 + 800/2 + 90; 

// X축 위치 설정방법 2(왼쪽 정렬의 경우에 적용가능, 800픽셀을 의미)

// document.getElementById('divMenu').style.left = 800;

moveRightEdge();

}

function setRightY() {

document.getElementById('divMenu').style.top = document.body.scrollTop +800;

document.getElementById('divMenu').style.visibility = "visible";

setRightX();

}

setRightY();

//-->

</script>

<script for="window" event="onresize">setRightX();</script>