본문 바로가기

프로그래밍/JAVASCRIPT

스크롤바가 내려가면 같이 따라 내려가는 top버튼 만들기

일명 둥둥이 효과라고 하지.
광고 효과를 높이기 위해서는 최고인듯..
근데 유저 입장에서는 귀찮다..ㅎㅎ

1. 다음과 같이 자바스크립트를 <head>와 </head> 사이에 넣는다.
 <head>
<script language="JavaScript"> 
<!-- 
self.onError=null; 
currentX = currentY = 0; 
whichIt = null; 
lastScrollX = 0; lastScrollY = 0; 
NS = (document.layers) ? 1 : 0; 
IE = (document.all) ? 1: 0; 
<!-- STALKER CODE --> 
function heartBeat() { 
if(IE) { 
diffY = document.body.scrollTop; 
diffX = 0; 

if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } 
if(diffY != lastScrollY) { 
percent = .1 * (diffY - lastScrollY); 
if(percent > 0) percent = Math.ceil(percent); 
else percent = Math.floor(percent); 
if(IE) document.all.layer1.style.pixelTop += percent; 
if(NS) document.layer1.top += percent; 
lastScrollY = lastScrollY + percent; 

if(diffX != lastScrollX) { 
percent = .1 * (diffX - lastScrollX); 
if(percent > 0) percent = Math.ceil(percent); 
else percent = Math.floor(percent); 
if(IE) document.all.layer1.style.pixelLeft += percent; 
if(NS) document.layer1.top += percent; 
lastScrollY = lastScrollY + percent; 


if(NS || IE) action = window.setInterval("heartBeat()",1); 
//--> 
</script>
</head>
 
2. top버튼의 위치지정하기- <body>와 </body> 사이에 다음 태그를 넣는다.
 

 <body>

<div id="layer1" style="width:이미지가로사이즈px; height:이미지세로사이즈px; position:absolute; left:화면왼쪽을 기준으로 얼마만큼뛰울것px; top:화면위로부터얼마만큼뛰울것px; z-index:20; visibility:visible;"><a href="#"onfocus='this.blur()'><img src="이미지주소" width="이미지가로사이즈" height="이미지세로사이즈" border="0"usemap="#ImageMap3"></a></div>

</body>