How to scroll to bottom with Bootstrap chat widget

Question

I am using the widget collapsed by default with class="panel-collapse collapse". When there are a number of items in the chat and it is opened scrolling starts at the top instead of at the bottom (which works fine if not collapsed by default). An example is at http://www.bestdealadvisors.com, add some items then refresh the page. When the widget is opened it starts at the top. How can I make this scroll from the bottom when opened?

Answer 1

You should listen on the event Bootstrap fires when something is collapsed. There is a bit of information here. Then scroll the chat window to the bottom.

This script has to be at the end of your page (after the bootstrap and jQuery script tags )

<script>
var panelBody = $("#chat-list")
$('#collapseOne').on('shown.bs.collapse', function () { 
  panelBody.stop().animate({scrollTop:panelBody.prop("scrollHeight")}, '100', 'swing')
})
</script>