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:
div.messageScrollArea{
width: 100%;
max-height: 300px;
overflow: auto;
}
JavaScript code:
$(document).ready(function () {
var objDiv = $('.messageScrollArea');
if (objDiv.length > 0){
objDiv[0].scrollTop = objDiv[0].scrollHeight;
}
});
This question is related to
javascript
jquery
//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");
}
$(function() {_x000D_
var wtf = $('#scroll');_x000D_
var height = wtf[0].scrollHeight;_x000D_
wtf.scrollTop(height);_x000D_
}); #scroll {_x000D_
width: 200px;_x000D_
height: 300px;_x000D_
overflow-y: scroll;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="scroll">_x000D_
<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>_x000D_
</div>Make a jQuery function more flexible.
$.fn.scrollDown=function(){
let el=$(this)
el.scrollTop(el[0].scrollHeight)
}
$('div').scrollDown()
No need to calculate the actual height of the contents; you can just scroll down a lot:
$(function () {
$('.messageScrollArea').scrollTop(1E10);
});
Scrolling with animation:
Your 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 part:
jQuery(document).ready(function(){
var $t = $('.messageScrollArea');
$t.animate({"scrollTop": $('.messageScrollArea')[0].scrollHeight}, "slow");
});
jQuery simple solution, one line, no external lib required :
$("#myDivID").animate({ scrollTop: $('#myDivID')[0].scrollHeight }, 1000);
Change 1000 to another value (this is the duration of the animation).
Here's one sample: http://jsfiddle.net/CUUfb/1/
Source: Stackoverflow.com