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

我的页面上有一个div：

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

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

这里的其他解决方案实际上不适用于内容很多的div －它“最大化”向下滚动到div的高度（而不是div 内容的高度）。因此，它们将起作用，除非您在其内容中具有div高度的两倍以上。

这是正确的版本：

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

或jQuery 1.6+版本：

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

或动画：

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

我在这里看到的所有答案，包括当前“已接受”的答案，实际上都是错误的，因为它们设置了：

scrollTop = scrollHeight

而正确的方法是设置：

scrollTop = scrollHeight - clientHeight

换一种说法：

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

或动画：

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

更新：有关完整答案，请参阅Mike Todd的解决方案。

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

如果要对其进行动画处理（超过1000毫秒）。

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

如果您想要它瞬间。

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

这将获取页面的高度，并在窗口加载后向下滚动。1000页面准备好后，请将更改为快速/慢速操作所需的任何内容。

试试这个：

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

将窗口滚动到目标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');

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

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

用于在jQuery中动画（版本> 2.0）

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

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

这可以使用基本的Javascript。

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

我正在使用旧版代码库尝试迁移到Vue。

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

所以...

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

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

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

您可以使用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");
  }
  
});

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

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

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

看图片