Automatically scroll to bottom as the page loads

Question

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.

Honan

why don't you insert things at the top of the page, instead of the bottom? ie the order of logging goes newest to oldest instead of the other way around? – Mourn

@TarynEast That could work. How do I do that? Note I have no influence over going from new to old. Effectively, every item processed I want to see, but if I can automatically echo to the start of the page instead of the bottom, that could work just as effectively. – Honan

That'd be a javascript thing to do... instead of just echoing where you are right now. – Mourn

@TarynEast The expectation to insert things at the bottom is for the same reason that this question's comment section and Stack Overflow chat rooms show oldest messages first. – Coincide

@DamianYerrick I have seen both orderings used depending on the situation. eg action-logs are often "newest first" because you don't actually care about what came right at the beginning... just what happened recently. – Mourn

To my knowledge, the only reason why newest comes first instead of oldest first is if the log is so immensive and its easy to add messages to the front, you want to prevent the user from scrolling. When it comes to a live update, I personally find it very distracting if text I'm reading jumps down as I'm reading it, while not so much if it jumps up, as it is very natural to move your eyes down. – Honan

Are you sure this problem is in any way related to PHP? – Emelina

@NicoHaase have you by any chance read the question itself? I work in PHP, and PHP outputs to html. I tagged it PHP in the question in case someone comes with a PHP only answer. – Honan

PHP itself does not know anything about "scroll to the bottom", as this is a server-side technology, so I doubt this is in any way related – Emelina

@NicoHaase well, this question was posted 9 years ago. I know that too now, but I also did not want to leave out PHP as my fundamentals and get the question rejected at the time for not having all information in it. Technically, I could, with the knowledge I have now, construct a convoluted PHP method of doing this. – Honan

Answer 1

This works:

<script>

    setTimeout(printSomething, 1000);

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

Savdeep

Your example gave me an idea, tested it and it works. :) I basically added an echo '<script>window.scrollTo(0,document.body.scrollHeight);</script'>'; after every iteration in my loop when it prints the info to the screen, and that automatically scrolls the page down as new lines are printed. Given that this solution is closest to that approach, this one gets the accepted. :) – Honan

Answer 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>

Craddock

I tried this, but unfortunately it does not work. My HTML outputs this: <body> <script> window.onload = autoscrolling() { setInterval(autoscrolling() { window.scrollTo(0,document.body.scrollHeight); },1000); }; </script> but it does not scroll. Perhaps because the page is still loading, javascript is not executed? – Honan

function autoScrolling() { window.scrollTo(0,document.body.scrollHeight); } setInterval(autoScrolling, 1000); remove window.onload – Craddock

Please check the demo to get better idea about the functionality you're looking for. When you placed the code you placed it wrongly inside the setInterval that's why it didn't work for you initially – Craddock

Thanks for pointing out the mistake. Your code indeed does work and this would be accepted, except that the other answer provides does not require an auto refresh, which is even more elegant. Thanks for your contribution though. Definitely good to know and might use this technique in the future where I can't rely on just outputting my data. – Honan

Hope you misunderstood both options. The accepted answer uses recursive calls for updating the scroll bar. Both answers doesm't auto refresh page but they just move the scrollbr to bottom only. setTimeout runs only once so he has called it recursively while setInterval runs after a particular interval always. – Craddock

Yes. I did. I did not fully used the accepted answer's method, but it helped me understood I could just call the function every time I need to scroll down. It gave me that "aha!" moment. :) – Honan

Answer 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);
    }

Unheard

Thank you for your answer. Unfortunately it was too complex and too similar to mohamedrias' answer for me to do anything with this one. Please keep up the good work though. A good set of pointers, definitely, but the other answers made it far more easy for me to work with. – Honan

Answer 4

In 2021 you can also just do this in your head:

    setTimeout(() => {
        window.scrollTo(0, document.body.scrollHeight);
    }, 100);

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: Verdana, sans-serif;
    font-size: 14px;    
}
</style>

<script>
    setTimeout(() => {
        window.scrollTo(0, document.body.scrollHeight);
    }, 100);
</script>

</head>
<body>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>
A lot of text goes here<br>

</body>
</html> 

Joanejoanie

Answer 5

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

now use

<body onload="fun">

Godfry

I'm really not good with JavaScript, but isn't this ajax or another framework code? – Honan

Thank you @lal for some reason window.scrollTo() wasn't working, trusty old jQuery to the rescue! – Eadwine

Answer 6

<script>
    //keep scrolling to bottom during PHP is running
    var myInterval = setInterval( () => {
        window.scrollTo(0,document.body.scrollHeight);
    }, 500 );
</script>

<?php
    //long output php code
?>

<script>
    //stop the timer after all PHP finished running
    clearInterval(myInterval);
</script>

Eucalyptol