티스토리 뷰

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
링크
«   2024/04   »
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
글 보관함