따라다니는 톱버튼(파이어폭스, 인터넷익스플로워 지원)
아래소스를 <head>와</head>사이에 삽입
<script type="text/javascript">
function CheckUIElements() {
var yMenu1From, yMenu1To, yOffset, timeoutNextCheck;
var wndWidth = parseInt(document.body.clientWidth);
yMenu1From = parseInt (webminiLayer.style.top, 10);
yMenu1To = document.body.scrollTop + 200; // 위쪽 위치
timeoutNextCheck = 500;
if ( yMenu1From != yMenu1To ) {
yOffset = Math.ceil( Math.abs( yMenu1To - yMenu1From ) / 20 );
if ( yMenu1To < yMenu1From )
yOffset = -yOffset;
webminiLayer.style.top = parseInt (webminiLayer.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
webminiLayer.style.left = (document.body.clientWidth/2)+440;
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function MovePosition() {
var wndWidth = parseInt(document.body.clientWidth);
// 페에지 로딩시 포지션
webminiLayer.style.top = 200;
webminiLayer.style.left = (document.body.clientWidth/2)+440;
webminiLayer.style.visibility = "visible";
// initializing UI update timer
CheckUIElements();
return true;
}
</script>
<body>와 </body>원하는 위치에 아래소스 삽입
<div style="position：absolute;top:400px;left:expression
<a href="#top"><img src="톱버튼이미지경로" width="38" height="24" border="0"></a>
</div>
<script type="text/javascript">MovePosition();</script>
확인결과 사파리,오페라,파폭,익스6/7 모두 작동합니다.
만약에 작동이 안되시는 분들은 상단의 DTD를 아래와 같이 바꿔주시기 바랍니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
버튼의 이미지는 사이트에 맞게 수정해주시면 됩니다.
탑버튼쪽에 메뉴를 삽입하면 메뉴가 따라다니겠죠? 응용해서 사용하세요.