blocks|key|926499|text|这里有一个示例：http://jsfiddle.net/CUUfb/1/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|926500|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/CUUfb/1/^0|8|S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Here's one sample: <a href="http://jsfiddle.net/CUUfb/1/" rel="nofollow noreferrer">http://jsfiddle.net/CUUfb/1/</a>

blocks|key|1141021|text|//note:+use+of+stop+function+to+prevent+animation+build-ups+if+called+repeatedly
//subtracting+container+height+brings+scrollTo+position+to+container+bottom
scrollUp+=+function()+{
++++$("#scroller").stop().animate({+scrollTop:+0+},+"slow");
}

scrollDown+=+function()+{
++++var+scroller+=+$('#scroller');
++++var+height+=+scroller[0].scrollHeight+-+$(scroller).height();

++++$(scroller).stop().animate({+scrollTop:+height+},+"slow");
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1141022|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>//note: use of stop function to prevent animation build-ups if called repeatedly
//subtracting container height brings scrollTo position to container bottom
scrollUp = function() {
 $("#scroller").stop().animate({ scrollTop: 0 }, "slow");
}

scrollDown = function() {
 var scroller = $('#scroller');
 var height = scroller[0].scrollHeight - $(scroller).height();

 $(scroller).stop().animate({ scrollTop: height }, "slow");
}
</code></pre>

blocks|key|926534|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|926535|$(function()+{
++var+wtf++++=+$('#scroll');
++var+height+=+wtf[0].scrollHeight;
++wtf.scrollTop(height);
});|code-block|syntax|javascript|926536|+#scroll+{
+++width:+200px;
+++height:+300px;
+++overflow-y:+scroll;
+}|926537|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+id="scroll">
++++ blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb blah halb +<center>Voila!!+You+have+already+reached+the+bottom+:)</center>
</div>|926538|926539|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
 var wtf = $('#scroll');
 var height = wtf[0].scrollHeight;
 wtf.scrollTop(height);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> #scroll {
 width: 200px;
 height: 300px;
 overflow-y: scroll;
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="scroll"&gt;
 &lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt;blah&lt;br/&gt;halb&lt;br/&gt; &lt;center&gt;&lt;b&gt;Voila!! You have already reached the bottom :)&lt;b&gt;&lt;/center&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|1141080|text|使jQuery函数更加灵活。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1141081|$.fn.scrollDown=function(){
++++let+el=$(this)
++++el.scrollTop(el[0].scrollHeight)
}

$('div').scrollDown()|code-block|syntax|javascript|1141082|https://jsfiddle.net/Thielicious/82ar7db2/|offset|length|1141083|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

Make a jQuery function more flexible.

<pre><code>$.fn.scrollDown=function(){
 let el=$(this)
 el.scrollTop(el[0].scrollHeight)
}

$('div').scrollDown()
</code></pre>

<a href="https://jsfiddle.net/Thielicious/82ar7db2/" rel="nofollow noreferrer">https://jsfiddle.net/Thielicious/82ar7db2/</a>

blocks|key|926599|text|jQuery简单的解决方案，一行，不需要外部库：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|926600|$("#myDivID").animate({+scrollTop:+$('#myDivID')[0].scrollHeight+},+1000);|code-block|syntax|javascript|926601|将1000更改为另一个值(这是动画的持续时间)。|926602|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|$]]

jQuery simple solution, one line, no external lib required :

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

Change 1000 to another value (this is the duration of the animation).

I have a div with a scrollbar on the right when there is a lot of text in it. I tried to use this code to scroll to the bottom of a div when the page loads, but I am not having much luck. How can it be achieved?

Style:

<pre><code>div.messageScrollArea{
 width: 100%;
 max-height: 300px;
 overflow: auto;
}
</code></pre>

JavaScript code:

<pre><code>$(document).ready(function () {
 var objDiv = $('.messageScrollArea');
 if (objDiv.length &gt; 0){
 objDiv[0].scrollTop = objDiv[0].scrollHeight;
 }
});
</code></pre>

Use jQuery to scroll to the bottom of a div with lots of text

jQuery

当有很多文本时，我有一个在右边有滚动条的div。当页面加载时，我尝试使用此代码滚动到div的底部，但我没有太多的运气。怎样才能实现呢？风格：div.messageScrollArea{    width: 100%;    max-height: 300px;    overflow: auto;}JavaScript...

问使用jQuery滚动到包含大量文本的div底部
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery滚动到包含大量文本的div底部EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery滚动到包含大量文本的div底部
EN