259

我的页面上有一个 div：

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

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

4

13 回答 13

680

这里的其他解决方案实际上不适用于具有大量内容的 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);
于 2012-07-18T22:40:21.170 回答
68

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

scrollTop = scrollHeight

而正确的方法是设置：

scrollTop = scrollHeight - clientHeight

换句话说：

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

或动画：

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);
于 2014-01-25T17:35:19.243 回答
26

更新：请参阅Mike Todd 的解决方案以获得完整的答案。

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

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

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

如果你想要它瞬间。

于 2012-05-08T17:44:22.883 回答
16 
$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

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

于 2012-05-08T17:40:38.410 回答
10

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

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

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}
于 2015-01-06T19:44:02.557 回答
7

试试这个：

$('#div1').scrollTop( $('#div1').height() )
于 2012-05-08T17:41:38.007 回答
6

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

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);
于 2013-07-05T03:46:01.047 回答
5

将窗口滚动到目标 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');
于 2012-11-26T05:32:45.247 回答
5

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

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);
于 2015-05-18T16:05:16.353 回答
3

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

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

所以...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})
于 2018-01-08T16:22:18.867 回答
0

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

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});
于 2017-12-29T09:36:42.487 回答
0

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

于 2019-04-09T17:28:46.930 回答
-1

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

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

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

看图片

于 2020-02-18T05:40:00.060 回答