티스토리 뷰
728x90
반응형
<script type="text/javascript">
function initMoving(target, position, topLimit, btmLimit) {
if (!target)
return false;
var obj = target;
obj.initTop = position;
obj.topLimit = topLimit;
obj.bottomLimit = document.body.scrollHeight - btmLimit;
obj.style.position = "absolute";
obj.top = obj.initTop;
obj.left = obj.initLeft;
if (typeof(window.pageYOffset) == "number") {
obj.getTop = function() {
return window.pageYOffset;
}
} else if (typeof(document.body.scrollTop) == "number") {
obj.getTop = function() {
return document.body.scrollTop;
}
} else {
obj.getTop = function() {
return 0;
}
}
if (self.innerHeight) {
obj.getHeight = function() {
return self.innerHeight;
}
} else if(document.documentElement.clientHeight) {
obj.getHeight = function() {
return document.documentElement.clientHeight;
}
} else {
obj.getHeight = function() {
return 500;
}
}
obj.move = setInterval(function() {
if (obj.initTop > 0) {
pos = obj.getTop() + obj.initTop;
} else {
pos = obj.getTop() + obj.getHeight() + obj.initTop;
//pos = obj.getTop() + obj.getHeight() / 2 - 15;
}
if (pos > obj.bottomLimit)
pos = obj.bottomLimit;
if (pos < obj.topLimit)
pos = obj.topLimit;
interval = obj.top - pos;
obj.top = obj.top - interval / 3;
obj.style.top = obj.top + "px";
}, 30)
}
</script>
<div id="gotop">
<a href="#head">상단으로 이동</a>
</div>
<script type="text/javascript">initMoving(document.getElementById("gotop"), 157, 10, 0);</script>
신현석님께서 만드신 스크롤이동에 따른 부드러운 레이어이동 스크립트 IE quirk 모드 버전입니다.
흔히 쇼핑몰에서 오늘본 상품목록이라던지
퀵모드, 배너 등에 사용되는 스크립트지요.
IE quirk 모드에서는
document.documentElement.scrollHeight 이 속성을 대체하여
document.body.scrollHeight 를
document.documentElement.scrollTop 이 속성을 대체하여
document.body.scrollTop 를 사용해주시면 됩니다.
브라우저별 렌더링모드별 자바스크립트 프로퍼티 리턴값 비교
신현석님의 원본코드
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- iPhone
- 애플
- 벤처
- 네이버
- 어플리케이션
- 공모전
- 트위터
- JavaScript
- 앱스토어
- 구글
- 자바스크립트
- 소프트웨어
- 창업
- android
- 아이폰
- AWS
- php
- 앱
- 아이디어
- 스마트폰
- 게임
- 경진대회
- 대학생
- Apple
- 모바일
- 안드로이드
- 웹표준
- CSS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함