Smooth scrolling for bottom div required!

Hello,

I want to stick one DIV to the bottom! I've managed to do that but when I scroll down the DIV doesn't scroll smoothly! Below is my code:-

Code:

 
  <div id="x">
 <center>
  <div id="footer" style="width: 95%; background-color:#66CCFF; border: 1px normal black; top: 100px; position:absolute; align:center; height: 50px" align="center"><center>A</center></div>
 </center>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script>

window.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

document.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

</script>

 <div id="x"> <center> <div id="footer" style="width: 95%; background-color:#66CCFF; border: 1px normal black; top: 100px; position:absolute; align:center; height: 50px" align="center"><center>A</center></div> </center> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <script> window.onscroll = function() { document.getElementById("footer").style.display = "none"; document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px"; document.getElementById("footer").style.display = ""; }; document.onscroll = function() { document.getElementById("footer").style.display = "none"; document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px"; document.getElementById("footer").style.display = ""; }; </script> 
 
 
  

Check attachment for the code too!

Do NOT wanna use CSS or any other JScript!
Do NOT wanna use "position: fixed; bottom: 0px;" as it doesn't work in IE6, 7, 8[citation needed].

Please help me!

Thanks,
Akshit Soota

Attachment for full code at:

http://www.daniweb.com/forums/attachment.php?attachmentid=10543&d=1245592053