页面加载时自动滚动到底部答案

【问题标题】：Automatically scroll to bottom as the page loads页面加载时自动滚动到底部
【发布时间】：2015-03-26 23:57:52
【问题描述】：

我有一个 php 脚本，它在脚本执行时显示其操作的日志。日志变得很长，以至于它会在页面底部回显其信息，并在页面上添加一个滚动条。

如果我想查看日志的其余部分，我必须手动向下滚动。我可以让页面说... process.php#bottom 但我不能只在每个日志项之后插入一个<a name="bottom" /> 并期望浏览器继续跳到底部，可以吗？

是否有一个 javascript 函数或其他简单的方法可以在不是这种情况时自动将页面滚动到底部？

我不介意它是否会覆盖用户的滚动能力，因为脚本将在 3 秒后重定向回主脚本。

如果您只有指针，我不一定需要完整的脚本，但是那些提供完整工作脚本的人显然会比那些只提供指针的人得到他们的答案。

如果你不明白我所说的日志是什么意思，你可以使用下面的脚本来模拟我的脚本的作用：

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

基本上，随着脚本每秒加载和休眠，当它到达页面底部时，它应该每秒自动向下滚动。

【问题讨论】：

为什么不在页面顶部而不是底部插入内容？即记录的顺序是从最新到最旧而不是相反？
@TarynEast 可以。我怎么做？请注意，我对从新到旧没有影响。实际上，我想查看处理的每个项目，但如果我可以自动回显到页面的开头而不是底部，那也可以同样有效地工作。
这将是一个 javascript 的事情......而不是仅仅呼应你现在的位置。
@TarynEast 期望在底部插入内容的原因与此问题的评论部分和 Stack Overflow 聊天室首先显示最旧的消息的原因相同。
@DamianYerrick 我已经看到根据情况使用两种排序。例如，动作日志通常是“最新的优先”，因为您实际上并不关心刚开始发生的事情......只是最近发生的事情。

标签： javascript php html

【解决方案1】：

这行得通：

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

【讨论】：

你的例子给了我一个想法，测试它并且它有效。 :) 我基本上添加了一个 echo ''>';在我的循环中的每次迭代之后，它将信息打印到屏幕上，并且在打印新行时自动向下滚动页面。鉴于该解决方案最接近该方法，因此该解决方案已被接受。 :)

【解决方案2】：

每隔 5 秒，它会将页面滚动到页面底部。

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>

【讨论】：

我试过这个，但不幸的是它不起作用。我的 HTML 输出如下：但它不会滚动。可能是因为页面还在加载，javascript没有执行？
function autoScrolling() { window.scrollTo(0,document.body.scrollHeight); } setInterval(autoScrolling, 1000); remove window.onload
请查看演示以更好地了解您正在寻找的功能。当您放置代码时，您将其错误地放置在 setInterval 中，这就是它最初对您不起作用的原因
感谢您指出错误。您的代码确实有效，这将被接受，除了提供的其他答案不需要自动刷新，这更加优雅。不过感谢您的贡献。很高兴知道并且将来可能会使用这种技术，因为我不能仅仅依赖于输出我的数据。
是的。我做到了。我没有完全使用接受的答案的方法，但它帮助我理解我每次需要向下滚动时都可以调用该函数。它给了我“啊哈！”片刻。 :)

【解决方案3】：

我认为您正在寻找的是：http://www.w3schools.com/jsref/met_win_scrollto.asp

然后，与此一起使用：http://www.w3schools.com/jsref/prop_element_scrollheight.asp

你可以做这样的事情：

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

【讨论】：

感谢您的回答。不幸的是，它太复杂且与 mohamedrias 的答案太相似，我无法对这个答案做任何事情。请继续做好工作。一组很好的指针，当然，但其他答案让我更容易使用。

【解决方案4】：

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

现在使用

<body onload="fun">

【讨论】：

我真的不擅长JavaScript，但这不是ajax还是其他框架代码？
感谢@lal，由于某种原因 window.scrollTo() 无法正常工作，值得信赖的旧 jQuery 来救援！

【解决方案5】：

在 2021 年，您也可以在头脑中做到这一点：

    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 test goes here<br>
A lot of test goes here<br>
A lot of test goes here<br>
A lot of test goes here<br>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</body>
</html>

【讨论】：