Question

我正在尝试创建一个简单的聊天窗口小部件，该窗口小部件将自动从其他文件加载数据，并保留在页面底部，除非用户完全向上滚动。到目前为止，我有加载工作，但滚动还没有工作。我已经尝试了几个不同的答案在SO以及许多其他地方，他们没有工作。另外，我对JavaScript相对较新。

以下是我正在使用的代码，非常感谢任何帮助！

 <!DOCTYPE html>
 <html>
 <head>
    <title>BennerBot v0.7 ~ Chat</title><link rel="stylesheet" type="text/css" href="resource/layout.css" media="screen" />
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
    var auto_refresh = setInterval(function (){
        $('#load').load('output.html?_=' +Math.random()).fadeIn("slow");
        $("#load").attr({ scrollTop: $("#load").attr("scrollHeight") });
     }, 1000);
    </script>
 </head>

 <body>
    <div id="load" style="overflow:auto"> </div>
 </body>
 </html>

以下是我正在使用的文件示例：

 <center><h1>Welcome to BennerBot</h1>Version 0.7</center>
 <img src=./resource/OutputLogo.png>08:48 <span style='color:#ff0000'>BennerBot</span>: Sucessfully Connected to Twitch<br>
 <img src=./resource/OutputLogo.png>08:48 <span style='color:#ff0000'>BennerBot</span>: Sucessfully Connected to Hitbox<br>
 <img src=./resource/OutputLogo.png>08:56 <span style='color:#ff0000'>BennerBot</span>: all the infromations<br>

Answer 1

看看this fiddle。这可能会解决您的问题

$('html,body').animate({
    scrollTop : $('.last').offset().top
},3000);

您只需在文档就绪功能中添加滚动操作。

如何在页面底部滚动到页面底部（带div）

1 个答案: