상하 지정가능 스크롤 따라 움직이는 레이어 소스
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <script type="text/javascript"> //<![CDATA[ function initMoving(target, position, topLimit, btmLimit) { if (!target) return false; var obj = target; var initTop = position; var bottomLimit = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - btmLimit - obj.offsetHeight; var top = initTop; obj.style.position = 'absolute'; if (typeof(window.pageYOffset) == 'number') { //WebKit var getTop = function() { return window.pageYOffset; } } else if (typeof(document.documentElement.scrollTop) == 'number') { var getTop = function() { return Math.max(document.documentElement.scrollTop, document.body.scrollTop); } } else { var getTop = function() { return 0; } } if (self.innerHeight) { //WebKit var getHeight = function() { return self.innerHeight; } } else if(document.documentElement.clientHeight) { var getHeight = function() { return document.documentElement.clientHeight; } } else { var getHeight = function() { return 500; } } function move() { if (initTop > 0) { pos = getTop() + initTop; } else { pos = getTop() + getHeight() + initTop; } if (pos > bottomLimit) pos = bottomLimit; if (pos < topLimit) pos = topLimit; interval = top - pos; top = top - interval / 3; obj.style.top = top + 'px'; window.setTimeout(function () { move(); }, 25); } function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function() { obj['e' + type + fn](window.event); } obj.attachEvent('on' + type, obj[type + fn]); } } addEvent(window, 'load', function () { move(); }); } //]]> </script> | cs |
1 2 3 4 | <div id="gotop"> <a href="#head" title="상단으로">위로</a> </div> <script type="text/javascript">initMoving(document.getElementById("gotop"), 50, 50, 50);</script> | cs |
사용법initMoving(움직일 대상, 스크롤위치, 상단 한계, 하단 한계);
MrZZang