在页面加载时滚动到 Div 的底部（jQuery）答案

【问题标题】：Scroll to bottom of Div on page load (jQuery)在页面加载时滚动到 Div 的底部（jQuery）
【发布时间】：2012-05-17 05:33:18
【问题描述】：

我的页面上有一个 div：

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

如何让 div 滚动到 div 的底部？不是页面，只是 DIV。

【问题讨论】：

标签： jquery html

【解决方案1】：

这里的其他解决方案实际上不适用于具有大量内容的 div——它“最大化”向下滚动到 div 的高度（而不是 content 的高度分）。所以它们会起作用，除非你的内容是 div 高度的两倍以上。

这是正确的版本：

$('#div1').scrollTop($('#div1')[0].scrollHeight);

或 jQuery 1.6+ 版本：

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

或动画：

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

【讨论】：

这也有效：$('#div1').scrollTop($('#div1').attr("scrollHeight"));
如何在不将绝对高度（以 px 为单位）设置为 div1 的情况下完成这项工作？
干得好！我正在寻找一个可以滚动的sn-p，我能找到它的所有页面滚动（html，正文）。这是一个很好的解决方案，使用 scrollHeight 是确保它始终到达底部的好方法。
太棒了，第二个是这样工作的：d = $('#div1'); $(d).scrollTop( $(d).prop("scrollHeight") );

【解决方案2】：

我在这里看到的所有答案，包括当前“接受”的答案，实际上都是错误的：

scrollTop = scrollHeight

而正确的方法是设置：

scrollTop = scrollHeight - clientHeight

换句话说：

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

或动画：

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

【讨论】：

我有一个设置高度和溢出设置为自动的 div。动画答案有效，但这是唯一实际滚动到“内容”底部的非动画解决方案，而不是 div 的设置高度。太棒了！

【解决方案3】：

更新：完整答案请参见Mike Todd's solution。

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

如果你想让它动画化（超过 1000 毫秒）。

$('#div1').scrollTop($('#div1').height())

如果你想要它是瞬时的。

【讨论】：

错了！ .height() 仅限于显示区域，.prop("scrollHeight") 是 div 的实际高度。
绝对！这就是为什么 Mike Todd 的 answer 是被接受的，而不是我的。

【解决方案4】：

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

这会抓取页面的高度并在窗口加载后向下滚动。页面准备就绪后，将1000 更改为您需要更快/更慢的操作。

【讨论】：

这会滚动整个页面，对吗？我只是想让 div 滚动到 div 的底部。
触摸。相同的逻辑，不同的选择器。

【解决方案5】：

这些都不适合我，我在一个类似于 Facebook Messenger 的网络应用程序中有一个消息系统，希望消息显示在 div 的底部。

这是一种享受，基本的 Javascript。

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

【讨论】：

你可能没有安装 jQuery。您正在使用本机 dom，他们正在使用 jQuery。 jquery.com
非常简洁优雅的解决方案。
这是唯一对我有用的解决方案。

【解决方案6】：

试试这个：

$('#div1').scrollTop( $('#div1').height() )

【讨论】：

【解决方案7】：

以下将起作用。请注意[0]和scrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

【讨论】：

【解决方案8】：

将窗口滚动到目标 div 的底部。

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

【讨论】：

【解决方案9】：

用于 jquery 中的动画（版本 > 2.0）

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

【讨论】：

【解决方案10】：

我正在尝试迁移到 Vue 的遗留代码库。

在我的特定情况下（包含在引导模式中的可滚动 div），v-if 显示了新内容，我希望页面向下滚动到该内容。为了让这个行为起作用，我不得不等待 vue 完成重新渲染，然后使用 jQuery 滚动到模态框的底部。

所以...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

【讨论】：

【解决方案11】：

您可以使用下面的代码在页面加载时滚动到 div 的底部。

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

【讨论】：

【解决方案12】：

您可以使用 scrollTop 检查 scrollHeight 和 clientHeight 以滚动到 div 的底部，如下面的代码。

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

【讨论】：

请务必在提供解决方案之前测试您的代码。

【解决方案13】：

当页面加载时，滚动是最大值。

这是用户发送消息时的消息框，然后始终向下显示最新聊天，因此滚动值始终为最大值。

$('#message').scrollTop($('#message')[0].scrollHeight);

see image

【讨论】：