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

Question

我在页面上有一个div：

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

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

- DobotJr

Answer 1

这里的其他解决方案实际上不能处理内容非常多的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);

- Mike Todd

---

这也可以：$('#div1').scrollTop($('#div1').attr("scrollHeight")); 该代码可实现将位于元素“div1”中的滚动条滚动到底部。 - Mike Todd

如何使其正常工作，而不需要为“div1”设置绝对高度（以px为单位）？ - znat

干得好！我正在寻找一个滚动代码片段，但我只能找到页面滚动（html，body）的内容。这是一个很好的解决方案，使用scrollHeight是确保它始终到达底部的好方法。 - Kevin Marmet

太棒了，第二个代码可以这样工作：d = $('#div1'); $(d).scrollTop( $(d).prop("scrollHeight") ); - loretoparisi

当用户按住滚动条时，有没有办法停止自动滚动？ - Akam

$('#div1').scrollTop($('#div1')[0].scrollHeight); 这段代码是有效的。 - Mohamed Raza

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);

- patspam

---

我有一个高度设置和溢出设置为自动的div。动画答案有效，但这是唯一一个实际滚动到“内容”底部而不是div设置高度的非动画解决方案。太棒了！ - Darkloki

Answer 3

更新：查看Mike Todd的解决方案获取完整答案。

---

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

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

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

如果你希望它是即时的。

- Alexis Pigeon

---

错误！.height() 限制于显示区域，.prop("scrollHeight") 是 div 的真正高度。 - Pointer Null

当然可以！这就是为什么Mike Todd的答案被接受，而不是我的原因。 - Alexis Pigeon

Answer 4

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

这段代码获取网页的高度，并在窗口加载后将其向下滚动。将 1000 更改为您需要的速度，以便在页面准备好时更快/更慢地执行。

- Chords

---

这会将整个页面滚动到右边吗？我只想让div滚动到div的底部。 - DobotJr

触发。相同的逻辑，不同的选择器。 - Chords

Answer 5

对我都没有用，我有一个类似Facebook Messenger内部的消息系统，希望消息显示在div底部。

这个方法非常有效，使用基本的JavaScript实现。

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

- James Blachford

---

你可能没有安装jQuery。你正在使用原生DOM，而他们正在使用jQuery。https://jquery.com/ - csga5000

非常整洁和优雅的解决方案。 - Divyanshu Das

这是唯一对我有效的解决方案。 - Vincent

Answer 6

试试这个：

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

- Ram

Answer 7

以下内容可行。请注意[0]和scrollHeight。

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

- Lal Kokkat

Answer 8

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

- jenking

Answer 9

对于 jQuery (版本 > 2.0) 中的动画效果：

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

- dpineda

Answer 10

我正在处理一个遗留的代码库，试图迁移到Vue。

在我的具体情况（包含在Bootstrap模态框中的可滚动div），当v-if显示新内容时，我希望页面能够自动向下滚动。为了使此行为正常工作，我必须等待Vue完成重新渲染，然后使用jQuery滚动到模态框底部。

所以...

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

- laaksom