Hi i set the scroll to bottom of the div on load, then i called ajax for getting updated content, after that i try to set the following coding
var container = $('.im'),
scrollTo = $('#last');
container.scrollTop(
scrollTo.offset().top - container.offset().top
);
from http://jsfiddle.net/xY7tx/
but not wokred as expected. please any one guide to fix this problem
Its works when i have added css for the div
like
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var container = $('.im'),
scrollTo = $('#last');
container.scrollTop(
scrollTo.offset().top - container.offset().top
);
</script>
<style>
.im {
width: 100px;
height: 70px;
border: 1px solid blue;
overflow: auto;
}
</style>
<body>
<div class="im">
message<br/>
message<br/>
message<br/>
messsage<br/>
<div id="last">Lastmessage</div>
</div>
</body>
</html>
another method for scroll to bottom of div
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('html, body').animate({ scrollTop: $(".im").height() }, 'slow');
</script>
<div class="im">
message<br/>
message<br/>
message<br/>
messsage<br/>
messsage<br/>
messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>
Lastmessage
</div>
</body>
</html>