滚动到新添加的可变高度div

Question

I am trying to figure out how to have a scrollable div scroll to the top of the most recently appended child div.

The html of the chatbox is as follows

<div class="character-chat-log">
    <div class="character-chat-message"><strong>Test 1:</strong> test</div>
    <div class="character-chat-message"><strong>Test 1:</strong> test</div>
    <div class="character-chat-message"><strong>Test 1:</strong> hey</div>
    <div class="character-chat-message"><strong>Test 1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac dictum est. Ut auctor feugiat lectus, consectetur adipiscing lacus scelerisque eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed dignissim, tortor sit amet feugiat feugiat, ante urna luctus est, ut varius velit diam sed sem. Etiam ut eleifend risus. Maecenas vulputate arcu ipsum, ut tempus lectus pulvinar non. Donec non tellus sed diam semper tempus et eget eros. Mauris quis auctor lorem, non sodales urna. Ut dui dolor, ultricies sit amet lacinia in, ultrices eu mauris. Donec eros tellus, laoreet sagittis hendrerit id, scelerisque id mi. Praesent fringilla ligula id suscipit malesuada. Vivamus risus magna, lobortis a congue sit amet, consequat eget lorem. Vestibulum imperdiet ultricies rutrum. Donec a blandit enim, nec euismod ante. Phasellus dignissim molestie urna.</div>
</div>

Currently I am trying to scroll to the top of the latest "character-chat-message" as follows:

var newMessage = $(
    '<div class="character-chat-message"><strong>'
    + sender
    + ':</strong> '
    + messageText
    + '</div>').appendTo(_messageBoxes[sender]);
_messageBoxes[sender].scrollTop(newMessage.position());

However this of course does not work at all.

Answer 1

It sounds like you're doing something similar to this question

Is that right?