scroll to bottom on page load but will allow to scroll on top

Question

I would like to scroll The div bottom to the bottom of the page when page loads but will also like to scroll back up when needed to how can i archive this without any animations how can i achieve this echo "<div id='bottom'><p><b>$from_username</b><br />$message</p></div>";

<script>

    function scrollpage() {     
        function f() 
        {
            window.scrollTo(0,i);
            if(status==0) {
                i=i+40;
                if(i>=Height){  status=1; } 
            } 
        setTimeout( f, 0.01 );
        }f();
    }
    var Height=document.documentElement.scrollHeight;
    var i=1,j=Height,status=0;
    scrollpage();
    </script>

this is what i have so far, i am able to scroll down automatically but can not scroll up when i want to, what can i do if i want to scroll up ?

well you're calling it constantly because your scrollpage(); call isn't wrapped with anything — Hyra Power, Nov 29 '15 at 03:53
you are right so any idea onhow i can do scroll up for that particular div — kunz, Nov 29 '15 at 04:00
found a jquery solution that's easier than ours. May want to mark this as a duplicate question. — Hyra Power, Nov 29 '15 at 04:08
there we go. Use my new solution and you will be good to go. — Hyra Power, Nov 29 '15 at 04:19

score 1 · Accepted Answer · edited May 23 '17 at 11:52

Scroll to bottom of Div on page load (jQuery) this is where I found the code I needed to put this together for you.

    <script>
        $( document ).ready(function() { 
            var d = $('#div1');
            d.scrollTop(d.prop("scrollHeight"));
            console.log("at the bottom!");
        });
    </script>
    </head>
    <body>
    <p>top</p>
    <div style="max-height: 200px;">
    <div id='div1' style='background-color:grey;width:200px;overflow:scroll;overflow-x:hidden;max-height:200px;'>
    <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p></div>
    </div>
    <p>bottom</p>
    <p>text under the div</p>
    </body>
</html>

scroll to bottom on page load but will allow to scroll on top

1 Answers1