Question

我的页面上有一个div：

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

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

Answer 1

这里的其他解决方案实际上并不适用于具有大量内容的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);

Answer 2

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

scrollTop = scrollHeight

正确的方法是设置：

scrollTop = scrollHeight - clientHeight

换句话说：

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

或动画：

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

Answer 3

更新：请参阅Mike Todd's solution获取完整答案。

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

如果你想要它的动画（超过1000毫秒）。

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

如果你想要它瞬间。

Answer 4

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

这会抓取页面的高度，并在窗口加载后将其向下滚动。一旦页面准备就绪，将1000更改为更快/更慢所需的任何内容。

Answer 5

试试这个：

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

Answer 6

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

Answer 7

用于jquery中的动画（版本＆gt; 2.0）

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

Answer 8

以下内容有效。请注意[0]和scrollHeight

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

Answer 9

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

这是一种善待，基本的Javascript。

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

Answer 10

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

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

因此...

while

Answer 11

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

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

Answer 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");
  }
  
});

Answer 13

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

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

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

see image

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

13 个答案: