blocks|key|2342631|text|这里的其他解决方案实际上并不适用于包含大量内容的div+--它会“最大化”滚动到div的高度(而不是div内容的高度)。所以它们是可以工作的，除非你的内容是div高度的两倍以上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2342632|以下是正确的版本：|2342633|$('#div1').scrollTop($('#div1')[0].scrollHeight);|code-block|syntax|javascript|2342634|或jQuery+1.6%2B版本：|2342635|var+d+=+$('#div1');
d.scrollTop(d.prop("scrollHeight"));|2342636|或动画：|2342637|$("#div1").animate({+scrollTop:+$('#div1').prop("scrollHeight")},+1000);|2342638|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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 content of the div). So they'll work, unless you have more than double the div's height in content inside of it.

Here is the correct version:

<pre><code>$('#div1').scrollTop($('#div1')[0].scrollHeight);
</code></pre>

or jQuery 1.6+ version:

<pre><code>var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));
</code></pre>

Or animated:

<pre><code>$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);
</code></pre>

blocks|key|2181565|text|我在这里看到的所有答案，包括目前“接受”的答案，实际上都是错误的，因为他们设置了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2181566|scrollTop+=+scrollHeight|code-block|syntax|javascript|2181567|而正确的方法是设置：|2181568|scrollTop+=+scrollHeight+-+clientHeight|2181569|换句话说：|2181570|$('#div1').scrollTop($('#div1')[0].scrollHeight+-+$('#div1')[0].clientHeight);|2181571|或动画：|2181572|$("#div1").animate({
++scrollTop:+$('#div1')[0].scrollHeight+-+$('#div1')[0].clientHeight
},+1000);|2181573|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

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

<pre><code>scrollTop = scrollHeight
</code></pre>

Whereas the correct approach is to set:

<pre><code>scrollTop = scrollHeight - clientHeight
</code></pre>

In other words:

<pre><code>$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);
</code></pre>

Or animated:

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

blocks|key|2338687|text|更新:查看Mike+Todd's+solution以获得完整的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2338688|2338689|$("#div1").animate({+scrollTop:+$('#div1').height()},+1000);|code-block|syntax|javascript|2338690|如果你想让它有动画效果(超过1000毫秒)。|2338691|$('#div1').scrollTop($('#div1').height())|2338692|如果你想要即时的话。|2338693|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/11551414/1065525^0|5|K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|12|8|@]|9|@]|C|$H|I]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|C|$]]|$1|L|3|M|5|G|7|14|8|@]|9|@]|C|$H|I]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

UPDATE : see <a href="https://stackoverflow.com/a/11551414/1065525">Mike Todd's solution</a> for a complete answer.

<hr>

<pre><code>$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);
</code></pre>

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

<pre><code>$('#div1').scrollTop($('#div1').height())
</code></pre>

if you want it instantaneous.

blocks|key|2338672|text|$(window).load(function()+{
++$("html,+body").animate({+scrollTop:+$(document).height()+},+1000);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2338673|这将抓取页面的高度，并在窗口加载后向下滚动。在页面准备就绪后，将1000更改为所需的值，以加快/减慢速度。|unstyled|offset|length|style|CODE|2338674|entityMap^0|0|W|4|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

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

blocks|key|2338773|text|这些对我来说都不起作用，我在一个web应用程序中有一个类似于Facebook+messenger的消息系统，希望消息出现在div的底部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2338774|这是一种享受，基本的Javascript。|2338775|window.onload=function+()+{
+++++var+objDiv+=+document.getElementById("MyDivElement");
+++++objDiv.scrollTop+=+objDiv.scrollHeight;
}|code-block|syntax|javascript|2338776|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

This worked a treat, basic Javascript.

<pre><code>window.onload=function () {
 var objDiv = document.getElementById("MyDivElement");
 objDiv.scrollTop = objDiv.scrollHeight;
}
</code></pre>

blocks|key|2342597|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2342598|$('#div1').scrollTop(+$('#div1').height()+)|code-block|syntax|javascript|2342599|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this:

<pre><code>$('#div1').scrollTop( $('#div1').height() )
</code></pre>

blocks|key|2181492|text|下面的方法将会起作用。请注意[0]和scrollHeight|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2181493|$("#myDiv").animate({+scrollTop:+$("#myDiv")[0].scrollHeight+},+1000);|code-block|syntax|javascript|2181494|entityMap^0|E|3|I|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

The following will work. Please note <code>[0]</code> and <code>scrollHeight</code>

<pre><code>$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);
</code></pre>

blocks|key|1324841|text|滚动窗口到目标div的底部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1324842|function+scrollToBottom(id){
++div_height+=+$("#"%2Bid).height();
++div_offset+=+$("#"%2Bid).offset().top;
++window_height+=+$(window).height();
++$('html,body').animate({
++++scrollTop:+div_offset-window_height%2Bdiv_height
++},'slow');
}

scrollToBottom('call_div_id');|code-block|syntax|javascript|1324843|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Scroll window to the bottom of target div.

<pre><code>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');
</code></pre>

blocks|key|2181644|text|对于jquery+(2.0以上版本)中的动画|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2181645|var+d+=+$('#div1');
d.animate({+scrollTop:+d.prop('scrollHeight')+},+1000);|code-block|syntax|javascript|2181646|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

for animate in jquery (version > 2.0)

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

blocks|key|2181693|text|我在一个遗留代码库中工作，试图迁移到Vue。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2181694|在我的特定情况下(包装在bootstrap模式中的可滚动div+)，v-if显示了我希望页面向下滚动到的新内容。为了让这个行为起作用，我不得不等待vue完成重新渲染，然后使用jQuery滚动到模式的底部。|2181695|所以..。|2181696|this.$nextTick(function()+{
++++$('#thing')[0].scrollTop+=+$('#thing')[0].scrollHeight;
})|code-block|syntax|javascript|2181697|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I'm working in a legacy codebase trying to migrate to 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.

So...

<pre><code>this.$nextTick(function() {
 $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})
</code></pre>

blocks|key|2181654|text|你可以使用下面的代码在页面加载时滚动到div的底部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2181655|$(document).ready(function(){
++$('div').scrollTop($('div').scrollHeight);
});|code-block|syntax|javascript|2181656|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use below code to scroll to bottom of div on page load.

<pre><code>$(document).ready(function(){
 $('div').scrollTop($('div').scrollHeight);
});
</code></pre>

blocks|key|2338843|text|你可以用scrollTop检查scrollHeight和clientHeight来滚动到div的底部，就像下面的代码一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2338844|​|2338845|$('#div').scroll(function+(event)+{
++if+((parseInt($('#div')[0].scrollHeight)+-+parseInt(this.clientHeight))+==+parseInt($('#div').scrollTop()))+
++{
++++console.log("this+is+scroll+bottom+of+div");
++}
++
});|code-block|syntax|javascript|2338846|2338847|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

You can check scrollHeight and clientHeight with scrollTop to scroll to bottom of div like code below.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#div').scroll(function (event) {
 if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
 {
 console.log("this is scroll bottom of div");
 }
 
});</code></pre>
</div>
</div>

blocks|key|543593|text|当页面被加载时，滚动是最大值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|543594|这是一个消息框，当用户发送消息时，总是在向下显示最新聊天，因此滚动值总是最大。|543595|$('#message').scrollTop($('#message')[0].scrollHeight);|code-block|syntax|javascript|543596|see+image|offset|length|543597|entityMap|0|LINK|mutability|MUTABLE|url|http://prntscr.com/r3v53p^0|0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

When page is load then scroll is max value .

This is message box when user send message then always show latest chat in down so that scroll value is always is maxium.


<pre><code>$('#message').scrollTop($('#message')[0].scrollHeight);
</code></pre>

<a href="http://prntscr.com/r3v53p" rel="nofollow noreferrer">see image</a>

I have a div on my page:

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

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

Scroll to bottom of Div on page load (jQuery)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我的页面上有一个div：<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>如何让div滚动到div的底部？？不是页面，只是DIV。

问滚动到页面加载时分区的底部(jQuery)
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到页面加载时分区的底部(jQuery)EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到页面加载时分区的底部(jQuery)
EN