使用jQuery滚动到有很多文本的div的底部

当有很多文本的时候，我在右边有一个滚动条的div。 我试着用这个代码在页面加载时滚动到div的底部，但是我没有太多的运气。 如何实现？

样式：

div.messageScrollArea{ width: 100%; max-height: 300px; overflow: auto; } 

JavaScript代码：

 $(document).ready(function () { var objDiv = $('.messageScrollArea'); if (objDiv.length > 0){ objDiv[0].scrollTop = objDiv[0].scrollHeight; } }); 

Answer 1

请参考： .scrollTop() ，你可以试试这里的解决scheme： http : //jsfiddle.net/y430ovjt/

 $(function() { var wtf = $('#scroll'); var height = wtf[0].scrollHeight; wtf.scrollTop(height); }); 

  #scroll { width: 200px; height: 300px; overflow-y: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="scroll"> <br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/> <center><b>Voila!! You have already reached the bottom :)<b></center> </div> 

Answer 2

不需要计算内容的实际高度; 你可以向下滚动很多 ：

 $(function () { $('.messageScrollArea').scrollTop(1E10); }); 

Answer 3

滚动animation：

你的DIV：

 <div class='messageScrollArea' style='height: 100px;overflow: auto;'> Hello World! Hello World! Hello World! Hello World! Hello World! Hello Hello World! Hello World! Hello World! Hello World! Hello World! Hello Hello World! Hello World! Hello World! Hello World! Hello World! Hello </div> 

jQuery部分：

 jQuery(document).ready(function(){ var $t = $('.messageScrollArea'); $t.animate({"scrollTop": $('.messageScrollArea')[0].scrollHeight}, "slow"); }); 

http://jsfiddle.net/3Wx3U/

Answer 4

 //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"); } 

Answer 5

 $(function() { var wtf = $('#scroll'); var height = wtf[0].scrollHeight; wtf.scrollTop(height); }); 

  #scroll { width: 200px; height: 300px; overflow-y: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="scroll"> <br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/> <center><b>Voila!! You have already reached the bottom :)<b></center> </div> 

Answer 6

使jQuery函数更加灵活。

 $.fn.scrollDown=function(){ var el=$(this); el.scrollTop(el[0].scrollHeight); }; $('#box').scrollDown(); 

https://jsfiddle.net/Dezain/9jcuy0tn/

Answer 7

以下是一个示例： http : //jsfiddle.net/CUUfb/1/