이것도 광고 효과에서 좋은 소스 예제중 하나이다.
스크롤 할때마다 하단에서 건들 거리면 따라 다닌다.
<html>
<head>
<title>http://www.xxxx.co.kr</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ScrollTOP() {
window.scrollTo(0,0);
}
function ScrollTOP_Call() {
document.body.ondblclick = Top;
}
var Xpos = 0;
var Ypos = 0;
var Ygravity = 0.85; //반동효과 정도 (숫자가 크면 클수록 반동이 심함)
var scrollPos = 0;
var oldScrollPos = 0;
function FloatMenu() {
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
oldScrollPos = scrollPos;
scrollPos = document.body.scrollTop;
Xpos = 855; //좌측여백
Yboundary = ((scrollPos + docHeight) - floater.offsetHeight) - 45; //하단여백
if (floater.offsetTop < Yboundary - 1)
Ypos += 2;
if (floater.offsetTop > Yboundary + 1)
Ypos -= 1;
Ypos *= Ygravity;
floater.style.pixelLeft = Xpos;
floater.style.pixelTop += Ypos;
}
window.setInterval("FloatMenu()", 1);
//-->
</SCRIPT>
</head>
<body>
페이지 오른쪽 하단에 TOP 버튼을 찾아보세요...스크롤할때마다 건들 거리며 따라다닙니다.
<div id="floater" style="Z-INDEX: 1; WIDTH: 55px; HEIGHT: 13px; POSITION: absolute; visibility: visible;">
<a href="javascript:ScrollTOP();" onFocus="this.blur()"><B>↑ TOP</B></a>
</DIV>
</body>
</html>
'프로그래밍 > JAVASCRIPT' 카테고리의 다른 글
| D3.js (Data-Driven Documents-자바스크립트 차트 및 비주얼 그래프를 원한다면) (0) | 2013.03.25 |
|---|---|
| 아주 유용한 자바스크립트 강좌 (0) | 2013.03.18 |
| Get방식으로 공백넘길때 처리방법 (0) | 2013.03.02 |
| Dynamic Drive DHTML 사이트 (0) | 2013.02.26 |
| 스크롤바가 내려가면 같이 따라 내려가는 top버튼 만들기 (0) | 2013.02.26 |