[Solved] Automatically scroll to bottom as the page loads

I have a php script that shows a log of its actions as the script proceeds. The log is getting quite long, up to the point where it will echo its information past the bottom of the page, adding a scrollbar to the page.

If I want to see the rest of the log, I have to manually scroll down. I can make the page go to say… process.php#bottom but I can’t just insert a <a name="bottom" /> after each log item and expect the browser to keep jumping to the bottom, can I?

Is there a a javascript function, or other easy method, that will automatically scroll the page to the bottom as soon as this isn’t the case?

I don’t mind if it overrides the user’s ability to scroll, as the script will redirect back to the main script after 3 seconds at the end anyway.

I do not necessarily need a full script, if you just have pointers, but those that provide a full working script will obviously get their answer accepted over those that just give pointers.

If you don’t have an idea of what I mean by the log, you can use the following script to simulate what my script does:

<?php
for( $iLineNumber=0 ; $iLineNumber <100 ; $iLineNumber++ )
{
    echo $iLineNumber , ' - This is a test. <br />';
    sleep(1);
}
?>

Basically, as the script loads and sleeps every second, when it hit the bottom of the page, it should automatically scroll down every second.

Enquirer: LPChip

||

Solution #1:

This works:

<script>

    setTimeout(printSomething, 1000);

    function printSomething(){
        for(var i=0; i<10; i++){
            document.write("Hello Worldn");
            document.write("<br>");
        }
        window.scrollTo(0,document.body.scrollHeight);
        setTimeout(printSomething, 1000);
    }
</script>
Respondent: Azazi

Solution #2:

Every 5 seconds, it will scroll the page to the bottom of the page.

function autoScrolling() {
   window.scrollTo(0,document.body.scrollHeight);
}

setInterval(autoScrolling, 5000); 
// adjust the time limit based on the frequency log gets updated
  <html>
   <body>
      <script type="text/javascript">
         setInterval(function() {
            document.body.innerHTML += "<p>New log</p><br>"
         }, 5000);
      </script>
   </body>
  </html>

Respondent: mohamedrias

Solution #3:

I think what you’re looking for is this: http://www.w3schools.com/jsref/met_win_scrollto.asp

And then, used with conjunction with this: http://www.w3schools.com/jsref/prop_element_scrollheight.asp

You can make something like:

    function scrollToBottom{
         window.scrollTo(0, document.body.scrollHeight);
    }
Respondent: userx01

Solution #4:

function fun()
{
 $("div").scrollTop(50);
}

now use

<body onload="fun">
Respondent: lal rishav

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.