blocks|key|1696291|text|这是我在我的网站上使用的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1696292|var+objDiv+=+document.getElementById("your_div");
objDiv.scrollTop+=+objDiv.scrollHeight;|code-block|syntax|javascript|1696293|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|$]]

<p>Here's what I use on my site:</p>

<pre><code>var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
</code></pre>


blocks|key|1481137|text|如果您使用的是jQuery+scrollTop，这就容易多了|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1481138|$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);|code-block|syntax|javascript|1481139|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/scrollTop/^0|7|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>This is much easier if you're using <a href="https://api.jquery.com/scrollTop/" rel="noreferrer">jQuery scrollTop</a>:</p>

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


blocks|key|1696340|text|使用jQuery+animate|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1696341|$('#DebugContainer').stop().animate({
++scrollTop:+$('#DebugContainer')[0].scrollHeight
},+800);|code-block|syntax|javascript|1696342|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/animate^0|2|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>using <a href="http://api.jquery.com/animate" rel="noreferrer">jQuery animate</a>:</p>

<pre><code>$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);
</code></pre>


blocks|key|1696561|text|在all+current+browsers上工作的较新方法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1696562|this.scrollIntoView(false);|code-block|syntax|javascript|1696563|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView^0|1|K|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Newer method that works on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" rel="noreferrer">all current browsers</a>:</p>

<pre><code>this.scrollIntoView(false);
</code></pre>


blocks|key|1481192|text|var+mydiv+=+$("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1481193|从jQuery+1.6开始工作|unstyled|1481194|https://api.jquery.com/scrollTop/|offset|length|1481195|http://api.jquery.com/prop/|1481196|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|X|0|0|0|R|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@$I|11|J|12|1|13]]|A|$]]|$1|M|3|-4|5|F|7|14|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]|T|$5|P|Q|R|A|$S|L]]]]

<pre><code>var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
</code></pre>

<p>Works from jQuery 1.6</p>

<p><a href="https://api.jquery.com/scrollTop/" rel="noreferrer">https://api.jquery.com/scrollTop/</a></p>

<p><a href="http://api.jquery.com/prop/" rel="noreferrer">http://api.jquery.com/prop/</a></p>


blocks|key|1696422|text|如果您不想依赖scrollHeight，下面的代码会有所帮助：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1696423|$('#scroll').scrollTop(1000000);|code-block|syntax|javascript|1696424|entityMap^0|7|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>If you don't want to rely on <code>scrollHeight</code>, the following code helps:</p>

<pre><code>$('#scroll').scrollTop(1000000);
</code></pre>


blocks|key|1697275|text|我的场景:我有一个字符串列表，在这个列表中，我必须附加一个用户给定的字符串，并自动滚动到列表的末尾。我已经固定了列表的显示高度，在此之后它应该会溢出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1697276|我尝试了@Jeremy+Ruten的答案，它起作用了，但它滚动到第(n-1)个元素。如果有人遇到这种类型的问题，您可以使用setTimeOut()方法解决。您需要将代码修改为：|offset|length|style|CODE|1697277|setTimeout(()+=>+{
++++var+objDiv+=+document.getElementById('div_id');
++++objDiv.scrollTop+=+objDiv.scrollHeight
},+0)|code-block|syntax|javascript|1697278|下面是我创建的StcakBlitz链接，它显示了问题及其解决方案：https://stackblitz.com/edit/angular-ivy-x9esw8|1697279|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-ivy-x9esw8^0|0|1P|C|0|0|X|1A|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>My Scenario: I had an list of string, in which I had to append a string given by a user and scroll to the end of the list automatically. I had fixed height of the display of the list, after which it should overflow.</p>

<p>I tried @Jeremy Ruten's answer, it worked, but it was scrolling to the (n-1)th element. If anybody is facing this type of issue, you can use <code>setTimeOut()</code> method workaround. You need to modify the code to below:</p>

<pre class="lang-js prettyprint-override"><code>setTimeout(() =&gt; {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)
</code></pre>

<p>Here is the StcakBlitz link I have created which shows the problem and its solution : <a href="https://stackblitz.com/edit/angular-ivy-x9esw8" rel="noreferrer">https://stackblitz.com/edit/angular-ivy-x9esw8</a></p>


blocks|key|1696883|text|Java脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1696884|document.getElementById('messages').scrollIntoView(false);|offset|length|style|CODE|1696885|滚动到当前内容的最后一行。|1696886|entityMap^0|0|0|1M|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>Java Script:</p>

<p><code>document.getElementById('messages').scrollIntoView(false);</code></p>

<p>Scrolls to the last line of the content present.</p>


blocks|key|1696831|text|Javascript或jquery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1696832|var+scroll+=+document.getElementById('messages');
+++scroll.scrollTop+=+scroll.scrollHeight;
+++scroll.animate({scrollTop:+scroll.scrollHeight});|code-block|syntax|javascript|1696833|Css：|1696834|+.messages
+{
++++++height:+100%25;
++++++overflow:+auto;
++}|1696835|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Javascript or jquery:</p>

<pre><code>var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});
</code></pre>

<p>Css:</p>

<pre><code> .messages
 {
      height: 100%;
      overflow: auto;
  }
</code></pre>


blocks|key|1697219|text|您可以像这样使用HTML+DOM+scrollIntoView方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1697220|var+element+=+document.getElementById("scroll");
element.scrollIntoView();|code-block|syntax|javascript|1697221|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|$]]

<p>You can use the HTML DOM scrollIntoView Method like this:</p>

<pre class="lang-js prettyprint-override"><code>var element = document.getElementById("scroll");
element.scrollIntoView();
</code></pre>


blocks|key|1481398|text|通过使用jQuery，可以使用scrollTop为任何给定的元素设置scollbar的垂直位置。还有一个很好的jquery+scrollTo+plugin用于滚动动画和不同的选项(demos)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1481399|var+myDiv+=+$("#div_id").get(0);
myDiv.scrollTop+=+myDiv.scrollHeight;|code-block|syntax|javascript|1481400|如果要在向下滚动时使用jQuery's+animate+method添加动画，请检查以下代码段：|1481401|var+myDiv+=+$("#div_id").get(0);
myDiv.animate({
++++scrollTop:+myDiv.scrollHeight
++},+500);|1481402|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/scrolltop/|1|https://github.com/flesler/jquery.scrollTo|2|http://demos.flesler.com/jquery/scrollTo/|3|http://api.jquery.com/animate/^0|F|9|0|1J|M|1|2I|5|2|0|0|B|N|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]|$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]]|C|$]]|$1|K|3|L|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]|Y|$5|P|Q|R|C|$S|Z]]]]

<p>Using jQuery, <a href="http://api.jquery.com/scrolltop/" rel="nofollow">scrollTop</a> is used to set the vertical position of scollbar for any given element. there is also a nice <a href="https://github.com/flesler/jquery.scrollTo" rel="nofollow">jquery scrollTo plugin</a> used to scroll with animation and different options (<a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow">demos</a>)</p>

<pre><code>var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;
</code></pre>

<p>if you want to use <a href="http://api.jquery.com/animate/" rel="nofollow">jQuery's animate method</a> to add animation while scrolling down, check the following snippet:</p>

<pre><code>var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);
</code></pre>


blocks|key|1481502|text|我觉得这真的很有用，谢谢。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481503|对于Angular+1.X的人来说：|1481504|angular.module('myApp').controller('myController',+['$scope',+'$document',
++function($scope,+$document)+{

++++var+overflowScrollElement+=+$document[0].getElementById('your_overflow_scroll_div');
++++overflowScrollElement[0].scrollTop+=+overflowScrollElement[0].scrollHeight;

++}
]);|code-block|syntax|javascript|1481505|只是因为在jQuery元素和HTML+DOM元素中的包装与angular有些混淆。|1481506|此外，对于聊天应用程序，我发现在加载聊天后进行此分配非常有用，您可能还需要使用较短的超时。|1481507|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Found this really helpful, thank you.</p>

<p>For the Angular 1.X folks out there: </p>

<pre class="lang-js prettyprint-override"><code>angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);
</code></pre>



<p>Just because the wrapping in jQuery elements versus HTML DOM elements gets a little confusing with angular.  </p>

<p>Also for a chat application, I found making this assignment after your chats were loaded to be useful, you also might need to slap on short timeout as well. </p>


blocks|key|1481557|text|我遇到了同样的问题，但有一个额外的约束:我无法控制将新元素附加到滚动容器中的代码。我在这里找到的示例都不允许我这样做。这是我最终得到的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481558|它使用Mutation+Observers+(https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)，这使得它只能在现代浏览器上使用(尽管存在多填充)|offset|length|style|CODE|1481559|所以基本上代码就是这么做的：|1481560|var+scrollContainer+=+document.getElementById("myId");

//+Define+the+Mutation+Observer
var+observer+=+new+MutationObserver(function(mutations)+{

++//+Compute+sum+of+the+heights+of+added+Nodes
++var+newNodesHeight+=+mutations.reduce(function(sum,+mutation)+{
++++++return+sum+%2B+[].slice.call(mutation.addedNodes)
++++++++.map(function+(node)+{+return+node.scrollHeight+%7C%7C+0;+})
++++++++.reduce(function(sum,+height)+{return+sum+%2B+height});
++},+0);

++//+Scroll+to+bottom+if+it+was+already+scrolled+to+bottom
++if+(scrollContainer.clientHeight+%2B+scrollContainer.scrollTop+%2B+newNodesHeight+%2B+10+>=+scrollContainer.scrollHeight)+{
++++scrollContainer.scrollTop+=+scrollContainer.scrollHeight;
++}

});

//+Observe+the+DOM+Element
observer.observe(scrollContainer,+{childList:+true});|code-block|syntax|javascript|1481561|我做了一个小提琴来演示这个概念：https://jsfiddle.net/j17r4bnk/|1481562|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver|1|https://jsfiddle.net/j17r4bnk/^0|0|3|I|N|1T|0|0|0|0|G|U|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@$D|14|E|15|1|16]]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>I have encountered the same problem, but with an additional constraint: I had no control over the code that appended new elements to the scroll container. None of the examples I found here allowed me to do just that. Here is the solution I ended up with .</p>

<p>It uses <code>Mutation Observers</code> (<a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver</a>) which makes it usable only on modern browsers (though polyfills exist)</p>

<p>So basically the code does just that :</p>

<pre><code>var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 &gt;= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});
</code></pre>

<p>I made a fiddle to demonstrate the concept : 
<a href="https://jsfiddle.net/j17r4bnk/" rel="nofollow">https://jsfiddle.net/j17r4bnk/</a></p>


blocks|key|1482274|text|替代解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1482275|function+scrollToBottom(element)+{
++element.scroll({+top:+element.scrollHeight,+behavior:+'smooth'+});
}|code-block|syntax|javascript|1482276|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|$]]

<p>alternative solution</p>
<pre class="lang-js prettyprint-override"><code>function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}
</code></pre>


blocks|key|1481287|text|小附录:如果最后一行已经可见，则仅滚动。如果稍微滚动一下，内容就会留在原处(注意:不使用不同的字体大小进行测试。这可能需要在">=比较“中进行一些调整)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481288|var+objDiv+=+document.getElementById(id);
var+doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);+++++++++++++++++++

//+add+new+content+to+div
$('#'+%2B+id+).append("new+line+at+end<br>");+//+this+is+jquery!

//+doScroll+is+true,+if+we+the+bottom+line+is+already+visible
if(+doScroll)+objDiv.scrollTop+=+objDiv.scrollHeight;|code-block|syntax|javascript|1481289|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|$]]

<p>small addendum: scrolls only, if last line is already visible. if scrolled a tiny bit, leaves the content where it is (attention: not tested with different font sizes. this may need some adjustments inside ">= comparison"):</p>

<pre><code>var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop&gt;=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end&lt;br&gt;"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;
</code></pre>


blocks|key|1696507|text|只是作为一个额外的片段。我正在使用angular，当一个用户选择了与用户的不同对话时，我试图将消息线程滚动到底部。为了确保在将新数据加载到div中之后，使用ng-repeat对消息执行滚动，只需在超时中包装滚动片段即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1696508|$timeout(function(){
++++var+messageThread+=+document.getElementById('message-thread-div-id');
++++messageThread.scrollTop+=+messageThread.scrollHeight;
},0)|code-block|syntax|javascript|1696509|这将确保在将数据插入到DOM之后触发scroll事件。|1696510|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Just as a bonus snippet. I'm using angular and was trying to scroll a message thread to the bottom when a user selected different conversations with users. In order to make sure that the scroll works after the new data had been loaded into the div with the ng-repeat for messages, just wrap the scroll snippet in a timeout.</p>

<pre><code>$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)
</code></pre>

<p>That will make sure that the scroll event is fired after the data has been inserted into the DOM.</p>


blocks|key|1481460|text|这会让你在文档高度上一直向下滚动|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481461|$('html,+body').animate({scrollTop:$(document).height()},+1000);|code-block|syntax|javascript|1481462|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|$]]

<p>This will let you scroll all the way down regards the document height</p>

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


blocks|key|1481598|text|您还可以使用jQuery，通过以下方式将动画附加到文档的html,body：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1481599|$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop},+1000);|1481600|这将导致平滑滚动到id为"+div+-id“的div的顶部。|1481601|entityMap^0|S|9|0|0|1W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<p>You can also, using jQuery, attach an animation to <code>html,body</code> of the document via:</p>

<p><code>$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);</code></p>

<p>which will result in a smooth scroll to the top of the div with id "div-id".</p>


blocks|key|1482135|text|像你一样，我正在构建一个聊天应用程序，希望最新的消息滚动到视图中。这最终对我来说效果很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1482136|//get+the+div+that+contains+all+the+messages
let+div+=+document.getElementById('message-container');

//make+the+last+element+(a+message)+to+scroll+into+view,+smoothly!
div.lastElementChild.scrollIntoView({+behavior:+'smooth'+});|code-block|syntax|javascript|1482137|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|$]]

<p>Like you, I'm building a chat app and want the most recent message to scroll into view. This ultimately worked well for me:</p>
<pre><code>//get the div that contains all the messages
let div = document.getElementById('message-container');

//make the last element (a message) to scroll into view, smoothly!
div.lastElementChild.scrollIntoView({ behavior: 'smooth' });
</code></pre>


blocks|key|1696901|text|一个非常简单的方法是将scroll+to设置为div的高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1696902|var+myDiv+=+document.getElementById("myDiv");
window.scrollTo(0,+myDiv.innerHeight);|code-block|syntax|javascript|1696903|entityMap^0|B|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>A very simple method to this is to set the <code>scroll to</code> to the height of the div.</p>

<pre><code>var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
</code></pre>


blocks|key|1696942|text|滚动到div中的最后一个元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1696943|myDiv.scrollTop+=+myDiv.lastChild.offsetTop|code-block|syntax|javascript|1696944|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|$]]

<p>Scroll to the last element inside the div:</p>

<pre><code>myDiv.scrollTop = myDiv.lastChild.offsetTop
</code></pre>


blocks|key|1697172|text|在我的Angular+6应用程序上，我这样做了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1697173|postMessage()+{
++//+post+functions+here
++let+history+=+document.getElementById('history')
++let+interval++++
++interval+=+setInterval(function()+{
++++history.scrollTop+=+history.scrollHeight
++++clearInterval(interval)
++},+1)
}|code-block|syntax|javascript|1697174|clearInterval(间隔)函数将停止计时器，以允许手动滚动顶部/底部。|1697175|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>On my Angular 6 application I just did this:</p>

<pre><code>postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}
</code></pre>

<p>The clearInterval(interval) function will stop the timer to allow manual scroll top / bottom.</p>


blocks|key|1697477|text|您可以使用Element.scrollTo()方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1697478|它可以使用内置的浏览器/OS动画进行动画，因此它非常流畅。|1697479|​|1697480|function+scrollToBottom()+{
++++const+scrollContainer+=+document.getElementById('container');
++++scrollContainer.scrollTo({
++++++++top:+scrollContainer.scrollHeight,
++++++++left:+0,
++++++++behavior:+'smooth'
++++});
}

//+initialize+dummy+content
const+scrollContainer+=+document.getElementById('container');
const+numCards+=+100;
let+contentInnerHtml+=+'';
for+(let+i=0;+i<numCards;+i%2B%2B)+{
++contentInnerHtml+%2B=+`<div+class="card+mb-2"><div+class="card-body">Card+${i+%2B+1}</div></div>`;
}
scrollContainer.innerHTML+=+contentInnerHtml;|code-block|syntax|javascript|1697481|.overflow-y-scroll+{
++overflow-y:+scroll;
}|1697482|<link+href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"+rel="stylesheet"/>

<div+class="d-flex+flex-column+vh-100">
++<div+id="container"+class="overflow-y-scroll+flex-grow-1"></div>
++<div>
++++<button+class="btn+btn-primary"+onclick="scrollToBottom()">Scroll+to+bottom</button>
++</div>
</div>|1697483|1697484|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo^0|5|I|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|Q|3|G|5|6|7|18|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

<p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo" rel="nofollow noreferrer">Element.scrollTo()</a> method.</p>
<p>It can be animated using the built-in browser/OS animation, so it's super smooth.</p>
<p><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>function scrollToBottom() {
    const scrollContainer = document.getElementById('container');
    scrollContainer.scrollTo({
        top: scrollContainer.scrollHeight,
        left: 0,
        behavior: 'smooth'
    });
}

// initialize dummy content
const scrollContainer = document.getElementById('container');
const numCards = 100;
let contentInnerHtml = '';
for (let i=0; i&lt;numCards; i++) {
  contentInnerHtml += `&lt;div class="card mb-2"&gt;&lt;div class="card-body"&gt;Card ${i + 1}&lt;/div&gt;&lt;/div&gt;`;
}
scrollContainer.innerHTML = contentInnerHtml;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.overflow-y-scroll {
  overflow-y: scroll;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;

&lt;div class="d-flex flex-column vh-100"&gt;
  &lt;div id="container" class="overflow-y-scroll flex-grow-1"&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;button class="btn btn-primary" onclick="scrollToBottom()"&gt;Scroll to bottom&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1697399|text|我使用第一个项目div的Y坐标和所选项目div的Y坐标之间的差。以下是JavaScript/JQuery代码和html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1697400|​|1697401|function+scrollTo(event){
++++++++//+In+my+proof+of+concept,+I+had+a+few+<button>s+with+value+
++++++++//+attributes+containing+strings+with+id+selector+expressions
++++++++//+like+"#item1".
++++++++let+selectItem+=+$($(event.target).attr('value'));
++++++++let+selectedDivTop+=+selectItem.offset().top;

++++++++let+scrollingDiv+=+selectItem.parent();

++++++++let+firstItem+=+scrollingDiv.children('div').first();
++++++++let+firstItemTop+=+firstItem.offset().top;

++++++++let+newScrollValue+=+selectedDivTop+-+firstItemTop;
++++++++scrollingDiv.scrollTop(newScrollValue);
++++}|code-block|syntax|javascript|1697402|<div+id="scrolling"+style="height:+2rem;+overflow-y:+scroll">
++<div+id="item1">One</div>
++<div+id="item2">Two</div>
++<div+id="item3">Three</div>
++<div+id="item4">Four</div>
++<div+id="item5">Five</div>
</div>|1697403|1697404|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I use the difference between the Y coordinate of the first item div and the Y coordinate of the selected item div.  Here is the JavaScript/JQuery code and the html:</p>
<p><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>function scrollTo(event){
        // In my proof of concept, I had a few &lt;button&gt;s with value 
        // attributes containing strings with id selector expressions
        // like "#item1".
        let selectItem = $($(event.target).attr('value'));
        let selectedDivTop = selectItem.offset().top;

        let scrollingDiv = selectItem.parent();

        let firstItem = scrollingDiv.children('div').first();
        let firstItemTop = firstItem.offset().top;

        let newScrollValue = selectedDivTop - firstItemTop;
        scrollingDiv.scrollTop(newScrollValue);
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="scrolling" style="height: 2rem; overflow-y: scroll"&gt;
  &lt;div id="item1"&gt;One&lt;/div&gt;
  &lt;div id="item2"&gt;Two&lt;/div&gt;
  &lt;div id="item3"&gt;Three&lt;/div&gt;
  &lt;div id="item4"&gt;Four&lt;/div&gt;
  &lt;div id="item5"&gt;Five&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1481783|text|如果要滚动到聊天窗口底部，请执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481784|在聊天中滚动到特定div的想法如下所示|1481785|1)每个由人、时间和消息组成的聊天div都在一个带有chatContentbox类的for循环中运行|1481786|2)+querySelectorAll查找所有这样的数组。它可以是400个节点(400个聊天)|1481787|3)转到最后一个|1481788|4)+scrollIntoView()|1481789|let+lastChatBox+=+document.querySelectorAll('.chatContentBox');+
lastChatBox+=+lastChatBox[lastChatBox.length-1];+
lastChatBox.scrollIntoView();+|code-block|syntax|javascript|1481790|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|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Y|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>If this is being done for scrolling to the bottom of chat window, do the following</p>

<p>The idea of scrolling to a particular div in the chat was the following </p>

<p>1) Each chat div consisting of Person, time and message is run in a for loop with class chatContentbox </p>

<p>2) querySelectorAll finds all such arrays. It could be 400 nodes (400 chats) </p>

<p>3) go to the last one </p>

<p>4) scrollIntoView() </p>

<pre><code>let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView(); 
</code></pre>


blocks|key|1482297|text|仅限Css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1482298|.scroll-container+{
++overflow-anchor:+none;
}|code-block|syntax|javascript|1482299|使其在添加子元素时滚动条不会停留在顶部。例如，当在聊天底部添加新消息时，将聊天滚动到新消息。|1482300|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Css only:</p>
<pre><code>.scroll-container {
  overflow-anchor: none;
}
</code></pre>
<p>Makes it so the scroll bar doesn't stay anchored to the top when a child element is added. For example, when new message is added at the bottom of chat, scroll chat to new message.</p>


blocks|key|1481747|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481748|var+element=+$('element');
var+maxScrollTop+=+element[0].scrollHeight+-+element.outerHeight();
element.scrollTop(maxScrollTop);|code-block|syntax|javascript|1481749|或选中滚动到底部：|1481750|++++var+element+=+$(element);
++++var+maxScrollTop+=+element[0].scrollHeight+-+element.outerHeight();
++++element.on('scroll',+function()+{
++++++++if+(+element.scrollTop()+>=+maxScrollTop+)+{
++++++++++++alert('scroll+to+bottom');
++++++++}
++++});|1481751|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>use :</p>

<pre><code>var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);
</code></pre>

<p>or check scroll to bottom :</p>

<pre><code>    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() &gt;= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });
</code></pre>


blocks|key|1481839|text|有时最简单的就是最好的解决方案:我不知道这是否会有帮助，它也帮助我滚动我想要的东西。"y=“越高，它向下滚动的次数就越多，当然"0”表示顶部，所以例如"1000“可能是底部，或者"2000”或"3000“等等，这取决于您的页面有多长。这通常在带有onclick或onmouseover的按钮中起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481840|window.scrollTo(x=0,y=150);|code-block|syntax|javascript|1481841|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|$]]

<p>Sometimes the most simple is the best solution:
I do not know if this will help, it helped me to scroll it were ever I wanted too. The higher the "y=" is,the more down it scrolls and of course "0" means top, so there for example "1000" could be bottom, or "2000" or "3000" and so on, depending how long your page is.
This usually works in a button with onclick or onmouseover.</p>

<pre><code>window.scrollTo(x=0,y=150);
</code></pre>


blocks|key|1697092|text|将距可滚动元素顶部的距离设置为该元素的总高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1697093|const+element+=+this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop+=+element.scrollHeight|code-block|syntax|javascript|1697094|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|$]]

<p>Set the distance from the top of the scrollable element to be the total height of the element.</p>

<pre><code>const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight
</code></pre>


<p>I am creating a chat using Ajax requests and I'm trying to get messages div to scroll to the bottom without much luck.</p>
<p>I am wrapping everything in this div:</p>
<pre><code>#scroll {
    height:400px;
    overflow:scroll;
}
</code></pre>
<p>Is there a way to keep it scrolled to the bottom by default using JS?</p>
<p>Is there a way to keep it scrolled to the bottom after an ajax request?</p>


Scroll to bottom of div?

容器

jQuery

Java

我正在使用Ajax请求创建聊天，并尝试让消息div滚动到底部，但没有太多运气。我将所有内容都包装在这个div中：#scroll {    height:400px;    overflow:scroll;}有没有办法让它在默认情况下使用JS滚动到底部？有没有办法在ajax请求后保持滚动到底部？

问滚动到div的底部？
EN

回答 29

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到div的底部？EN

回答 29

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到div的底部？
EN