如何在頁面底部滾動到頁面底部（使用div）

我正嘗試創建一個簡單的聊天窗口小部件，該窗口小部件將自動從不同的文件加載數據，並保留在底部除非用戶已經滾動頁面。到目前爲止，我有加載工作，但滾動還沒有奏效。我已經在SO以及許多其他地方嘗試了幾個不同的答案，但他們中的一些人都工作過。另外，我對JavaScript比較陌生。如何在頁面底部滾動到頁面底部（使用div）

這裏是我使用的代碼，任何幫助將不勝感激！

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

來源

2014-10-31 Jdbener

看this fiddle。這可能會回答你的問題

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

所有你需要做的就是添加滾動動作文檔就緒功能。

來源

2014-10-31 04:12:25 Chakri

感謝您的回覆，但我正在使用動態div來動態添加內容。這個劑量不工作 – Jdbener 2014-10-31 04:28:34

如何在頁面底部滾動到頁面底部（使用div）

回答

相關問題