Set scroll bar position using jQuery

by audetwebdesign

HTML

<div class='inner-conversation-container'>
    <div class='conversation-stream-container'>
        <!-- A single item -->
        <div class='conversation-item'>
            <!-- Message parts -->
            <div class='conversation-message-part' msg-id='125'>
                <div class='center-part'>test 9</div>
            </div>
            <div class='conversation-message-part' msg-id='126'>
                <div class='center-part'>test 10</div>
            </div>
            <div class='conversation-message-part' msg-id='127'>
                <div class='center-part'>test 11</div>
            </div>
            <div class='conversation-message-part' msg-id='128'>
                <div class='center-part'>test 12</div>
            </div>
            <div class='conversation-message-part' msg-id='129'>
                <div class='center-part'>that&#x27;s enough</div>
            </div>
            <div class='conversation-message-part' msg-id='130'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='131'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='132'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='133'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='134'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='135'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='136'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part'...

CSS

.inner-conversation-container {
    height: 200px;
    width: 500px;
    border: 2px solid lightgray;
    overflow: auto;
}
.conversation-stream-container {
    background-color: yellow;
}

JavaScript

$('.inner-conversation-container').scrollTop($('.inner-conversation-container')[0].scrollHeight);