Javascript scrollTop未按预期工作 发送 $（“#消息”）.animate（{scrollTop:$（“#消息”）.prop（“scrollHeight”）}，1000）； $（文档）.ready（函数（）{ $（“#提交”）。单击（函数（e）{ e、 预防默认值（）； $.ajax({ 键入：“POST”， url:“/contact\u live\u chat/chat\u display.html？用户名=”， 数据：{content:$（'#contentofmessage'）.val（）， }); loadlink（）； $（“#消息”）.animate（{scrollTop:$（“#消息”）.prop（“scrollHeight”）}，1000）； }); }); 函数loadlink（）{ $（文档）.ready（函数（）{ $（'#消息'）。加载（“https://www.chicjrajeevalochana.com/contact_live_chat/chat_display.html?username="); }); } loadlink（）；//这将在页面加载时运行 setInterval（函数（）{ var scrollTarget=$（“#消息”）； var pos=scrollTarget.scrollTop（）； scrollTarget.load（'https://www.chicjrajeevalochana.com/contact_live_chat/chat_display.html?username=，函数（）{ $（“#消息”）.scrollTop（pos）； }); },5000);

我使用了一些php，你可以在测试自己的时候替换它

编辑

---

我的目标是在页面加载时自动向下滚动div中的内容。

也许你应该准确描述一下你期望的内容？在你的截图中，你似乎已经领先了

是否要滚动到已提交的邮件

<div id="messages" class="messages"></div>
<hr>
<textarea id="contentofmessage" name="content" type="text" maxlength="320" style="box-sizing: border-box; width: 100%; height: 100px; padding: 10px; font-family: Arial, sans-serif; border-radius: 5px; outline: none; border: 2px solid #D3D3D3; resize: none;" placeholder="Type your message here..."></textarea><br><br>
<button id="submit" class="btn_anchor_for_submit">Send</button>
<script>
$("#messages").animate({ scrollTop: $('#messages').prop("scrollHeight")}, 1000);

    $(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            
            $.ajax({
                type: 'POST',
                url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
                data: {content: $('#contentofmessage').val()},
            });
            loadlink();
            $("#messages").animate({ scrollTop: $('#messages').prop("scrollHeight")}, 1000);
        });
    });

function loadlink(){
$(document).ready(function(){
   
   $('#messages').load("https://www.chicjrajeevalochana.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>");
   

});
}

loadlink(); // This will run on page load

        setInterval(function () {
            var scrollTarget = $('#messages');
            var pos = scrollTarget.scrollTop();
            scrollTarget.load('https://www.chicjrajeevalochana.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>', function() {
                $('#messages').scrollTop(pos);
            });
        },5000);
</script>

---

您的代码应该是这样的

var objDiv = document.getElementById("messages");
const { top } = objDiv.getBoundingClientRect();

window.scrollTo({ top } ); // or objDiv.scrollTo({ top });

$（文档）.ready（函数（）{
$（'#messages'）.html（'Hellow'）；
滚动到（0650）；
函数loadlink（）{
$（'#messages'）.html（'Hellow'）；
}
loadlink（）；
setInterval（函数（）{
loadlink（）；
},5000);
});

---

要在每次内容加载后滚动到

#messages

div的底部，应在该加载的回调时滚动。。。这是异步的（读取：需要时间…几毫秒）

事实上，你没有。因此，时间上的步骤是：

• 1：发送加载请求
• 2：滚动已完成（但是div可能已经在底部，所以您没有注意到它）
• 3：加载响应到达并更新div

要在没有动画的情况下滚动（），它将是：

$（“#消息”）.scrollTop（$（“#消息”）.prop（“scrollHeight”）

如果将其放置为

.load（）

回调，它看起来像：

$(document).ready(function(){
        $('#messages').html('<h1>Hellow</>');
   window.scrollTo(0, 650);
    function loadlink(){
    $('#messages').html('<h1>Hellow</>');
  }
  loadlink();
  setInterval(function () {
                loadlink();
        },5000);
});

您误用了

$（document）.ready（function（）{}）

…这是一个事件处理程序，在DOM完全加载时触发…因此仅在初始页面加载时。下面，我只在该处理程序中放置了必要的内容

下面是我建议您尝试的全部代码

$.ajax({
  type: 'POST',
  url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
  data: {content: $('#contentofmessage').val()},
  success: loadlink
});

函数loadlink（）{
让loadURL=”https://www.chicjrajeevalochana.com/contact_live_chat/chat_display.html?username=";
让loadCallback=function（）{
$（“#消息”）.scrollTop（$（“#消息”）.prop（“scrollHeight”）；
}
$（'#messages'）.load（loadURL，loadCallback）；
}
$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
键入：“POST”，
url:“/contact\u live\u chat/chat\u display.html？用户名=”，
数据：{content:$（'#contentofmessage'）.val（），
成功：加载链接
});
});
loadlink（）；//这将在页面加载时运行
setInterval（函数（）{
loadlink（）；
},5000);
})

在

#messages

中没有内容会使其溢出，因此scrollTop设置不会做任何事情。如果您进行了更新，您可以获取

scrollTop

值，然后将其应用于同一元素而不进行更改…@Rorymcrossan我实际上是js新手。我从互联网上获取了这些内容，所以，请帮帮我！如果您愿意的话al很清楚。如果要滚动到底部，请将scrollTop设置为大于元素高度的值，例如，

$（“#消息”）。当我使用
$（“#消息”）时，scrollTop（10000）
。动画（{scrollTop:$（“#消息”）。道具（“scrollHeight”）}，1000）

，它可以工作，但我不希望它被动画化。似乎对meMy不起作用。我的目标是在页面加载时滚动到div的底部。我想我把你们搞糊涂了。好吧，现在让我解释一下我的整个目标。我想在div消息中显示另一个页面chat_display.html。我想每5秒重新加载一次。我想让它重新加载当整个页面加载时，我只会自动向下滚动一次。然后，每次重新加载div时，我希望滚动位置保持原样。就是这样。我已经更新了fiddle…希望这会有所帮助。我明白了，但我只希望div向下滚动，而不是整个页面。我将很快对其进行测试。现在太早了，而且你在晚上看到它回答：很抱歉反应太晚。我调整了

setInterval

部分，一切正常！非常感谢。

let loadURL = "https://www.chicjrajeevalochana.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>"
let loadCallback = function(){
  $("#messages").scrollTop( $('#messages').prop("scrollHeight") )
}
$('#messages').load(loadURL, loadCallback)

$.ajax({
  type: 'POST',
  url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
  data: {content: $('#contentofmessage').val()},
  success: loadlink
});

function loadlink(){
    let loadURL = "https://www.chicjrajeevalochana.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>";
    let loadCallback = function(){
      $("#messages").scrollTop($('#messages').prop("scrollHeight"));
    }
    $('#messages').load(loadURL, loadCallback);
}

$(document).ready(function(){
  $('#submit').click(function(e) {
      e.preventDefault();

      $.ajax({
        type: 'POST',
        url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
        data: {content: $('#contentofmessage').val()},
        success: loadlink
      });
  });

  loadlink(); // This will run on page load

  setInterval(function () {
    loadlink();
  },5000);
})