在页面加载(jQuery)上滚动到Div的底部

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的解决方案以获得完整的答案.

$("#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

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

这很好用，基本的 Javascript。

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

Answer 6

试试这个:

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

Answer 7

滚动窗口到目标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 8

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

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

Answer 9

用于jquery中的动画(版本> 2.0)

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