* 본 팁은 PHP School, 지우, SGUMG님의 팁을 참고해 MissFlash가 최종정리한 것입니다.
* 퍼가실 때는 댓글로 퍼가시는 글의 원본주소를 남겨주시기 바랍니다. ^^;
* 퍼가실 때는 댓글로 퍼가시는 글의 원본주소를 남겨주시기 바랍니다. ^^;
지금까지 나온 "스크롤바에 따라 부드럽게 움직이는 Top버튼" 스크립트의 종류는 셀 수 없이 많습니다.
하지만, 대부분의 경우 다음과 같은 문제로 몇 가지 한계를 가집니다.
- 브라우저의 종류에 따라 안 될 때가 많다.
최근 들어 느려터진 IE(인터넷 익스플로러)에 질려 FF(파이어폭스)로 바꾼 분들이 많을 겁니다. 그런데 IE에서는 문제없이 되던게 다른 브라우저에서는 먹통인 경우가 많습니다. 움직이는 Tob버튼도 마찬가지 입니다. - 화면해상도에 따라 Top버튼의 위치가 달라진다.
힘들게 Top버튼을 적용시켜도 해상도가 달라질 경우, Top버튼의 위치가 전혀 달라지는 경우도 많았습니다. - 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"> - 자바스크립트를 붙여넣기가 너무 힘들다.
HTML이나 자바스크립트에 익숙하지 않은 사용자에게는 힘들게 찾은 스크립트를 붙여넣는 것도 쉽지 않습니다.
지금부터 이 같은 문제들을 한 번에 해결할 수 있는 좋은 방법을 알려드리겠습니다.
A. 먼저 아래의 top.zip파일을 다운받은 후 압축을 해제합니다.
invalid-fileB. 다음으로 적당한 텍스트 편집기를 이용해 압축을 해제한 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>
/*
* 본 파일은 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버튼이 부드럽게 움직이는 것을 보실 수 있습니다.
'Tip&Tech > Web' 카테고리의 다른 글
| 파이어폭스(Firefox) 유용 플러그인 2종셋트 ^^ (4) | 2007.10.24 |
|---|---|
| [팁] 윈도우XP 네트워크 공유 폴더 암호 설정하기 (0) | 2007.10.03 |
| [추천강좌] 초보자를 위한 서기님의 추천 PHP 동영상 강좌! (0) | 2007.08.08 |
| 사이트 패스워드 관리의 최강자 RoboForm vs. 알패스 (3) | 2007.07.26 |
| [팁] 자바 스크립트를 이용한 Input Text 입력글자 제한하기! (6) | 2007.07.21 |
