스크롤 따라 부드럽게 움직이는 레이어

페이지 스크롤에 따라서 부드럽게 움직이는 레이어. 보통 화면 상단으로 올라가는 탑버튼이나 퀵메뉴, 윙배너 구현에 사용된다. IE6, IE7, FF2, Opera9, Safari3에서 테스트 완료.

위치(position)값이 양수이면 브라우저의 상단으로 부터의 거리, 음수이면 하단으로 부터의 거리로 계산이 된다.

Code

Script

function initMoving(target, position, topLimit, btmLimit) {
    if (!target)
        return false;

    var obj = target;
    obj.initTop = position;
    obj.topLimit = topLimit;
    obj.bottomLimit = document.documentElement.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.documentElement.scrollTop) == "number") {
        obj.getTop = function() {
            return document.documentElement.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)
}


HTML

<div id="gotop">
    <a href="#head" title="상단으로"><img src="/images/nav/top.gif" alt="Top"></a>
</div>
<script type="text/javascript">initMoving(document.getElementById("gotop"), 66, 66, 250);</script>


개선할점

    * 온로드(onload)시에 적용 : 온로드 이전에 적용하면 페이지 높이가 충분하지 않아서 하단쯤에 이동이 잘 되지 않는 경우가 발생
    * %단위 입력
[신현석님 블로그에서..]

[출처] [본문스크랩] 스크롤 따라 부드럽게 움직이는 레이어|작성자 엑수티