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

我的网页上有一个div：

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

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

Answer 1

这里的其他解决scheme实际上并不适用于包含大量内容的div – 它会“最大化”滚动到div的高度（而不是div的内容的高度）。 所以他们会工作，除非你的内容高度超过div的两倍。

这是正确的版本：

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

或jQuery 1.6+版本：

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

或animation：

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

Answer 2

我在这里可以看到的所有答案，包括目前被“接受”的答案，其实都是错误的，

 scrollTop = scrollHeight 

鉴于正确的做法是设定：

 scrollTop = scrollHeight - clientHeight 

换一种说法：

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

或animation：

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

Answer 3

更新：请参阅迈克托德的解决scheme的完整答案。

---

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

如果你想要animation（超过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

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

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

Answer 8

在jQuery中animation（版本> 2.0）

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

Answer 9

这些工作都没有为我工作，我有一个类似于Facebook Messenger的Web应用程序内的消息系统，并希望消息出现在一个div的底部。

这工作了一个款待，基本的Javascript。

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