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

Scroll to bottom of Div on page load (jQuery)

提问by DobotJr

I have a div on my page:

我的页面上有一个 div：

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

How can I make the div scroll to the bottom of the div?? Not the page, just the DIV.

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

回答by Mike Todd

The other solutions here don't actually work for divs with lots of content -- it "maxes out" scrolling down to the height of the div (instead of the height of the contentof the div). So they'll work, unless you have more than double the div's height in content inside of it.

这里的其他解决方案实际上不适用于具有大量内容的 div——它“最大化”向下滚动到 div 的高度（而不是 div内容的高度）。所以它们会起作用，除非你的 div 的高度是它里面的内容的两倍多。

Here is the correct version:

这是正确的版本：

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

or jQuery 1.6+ version:

或 jQuery 1.6+ 版本：

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

Or animated:

或动画：

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

回答by patspam

All the answers that I can see here, including the currently "accepted" one, is actually wrong in that they set:

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

scrollTop = scrollHeight

Whereas the correct approach is to set:

而正确的方法是设置：

scrollTop = scrollHeight - clientHeight

In other words:

换句话说：

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

Or animated:

或动画：

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

回答by Alexis Pigeon

UPDATE : see Mike Todd's solutionfor a complete answer.

更新：有关完整答案，请参阅Mike Todd 的解决方案。

---

---

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

if you want it to be animated (over 1000 milliseconds).

如果您希望它具有动画效果（超过 1000 毫秒）。

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

if you want it instantaneous.

如果你想瞬间完成。

回答by Chords

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

This grabs the height of the page and scrolls it down once the window has loaded. Change the 1000to whatever you need to do it faster/slower once the page is ready.

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

回答by undefined

try this:

尝试这个：

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

回答by jenking

Scroll window to the bottom of target div.

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

回答by dpineda

for animate in jquery (version > 2.0)

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

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

回答by James Blachford

None of these worked for me, I have a message system inside a web app that's similar to Facebook messenger and wanted the messages to appear at the bottom of a div.

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

This worked a treat, basic Javascript.

这很好用，基本的 Javascript。

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

回答by Lal Kokkat

The following will work. Please note [0]and scrollHeight

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

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

回答by Mavrick Laakso

I'm working in a legacy codebase trying to migrate to Vue.

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

In my specific situation (scrollable div wrapped in a bootstrap modal), a v-if showed new content, which I wanted the page to scroll down to. In order to get this behaviour to work, I had to wait for vue to finish re-rendering, and then use jQuery to scroll to the bottom of the modal.

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

So...

所以...

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