1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Smooth scrolling for bottom div required!

Discussion in 'Web Design, HTML And CSS' started by akshits, Jun 26, 2009.

  1. akshits

    akshits New Member

    Joined:
    May 10, 2009
    Messages:
    23
    Likes Received:
    2
    Trophy Points:
    0
    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
     

Share This Page