SCROLL - Custom Scroll-to-bottom event

by bizamajig

HTML

<script src="http://enscrollplugin.com/releases/enscroll-0.6.0.min.js"></script>
<div class="scrollbox">
    
</div>

<button class="addrow">add row</button>
<button class="scrollToBottom">Scroll To Bottom</button>

CSS

.scrollbox {
    overflow: auto; /* Start writing your markup with this style */
    width: 315px;   /* The dimensions of your content pane */
    height: 350px;
    border: 1px solid #b7b7b7;
    padding: 0 5px;
}
.scrollbox p { margin: 20px 0; }
.scrollbox p:first-child { margin-top: 0; }

.vertical-track {
    width: 16px;              /* The width of the scrollbar */
    background-color: #ddd;   /* The color of the scrollbar track*/
}

.vertical-handle {
    width: 100%;
    background-color: #77f; /* The color of the scrollbar handle */
}

/*OR FACEBOOK STYLE*/

.track3 {
    width: 10px;
    background: rgba(0, 0, 0, 0);
    margin-right: 2px;
    border-radius: 10px;
    -webkit-transition: background 250ms linear;
    transition: background 250ms linear;
}

.track3:hover,
.track3.dragging {
    background: #d9d9d9; 
    background: rgba(0, 0, 0, 0.15);
}

.handle3 {
    width: 7px;
    right: 0;
    background: #999;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    -webkit-transition: width 250ms;
    transition: width 250ms;
}

.track3:hover .handle3,
.track3.dragging .handle3 {
    width: 10px;
}

/*OR GMAIL STYLE*/

.track4 {
    width: 10px;
    background-clip: padding-box;
    background: #fff;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-left-width: 1px;
}

.track4.dragging,
.track4:hover {
    background: #f2f2f2; /* No RGBA support */
    background: rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
}

.track4:active {
    background: #f2f2f2; /* No RGBA support */
    background: rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                        inset -1px -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.handle4 {
    width: 10px;
    background-clip: padding-box;
    background: #ccc;...

JavaScript

/*
 * Press Ctrl+Shift+Up to hide the left sidebar!
 *
 */

var newline = '<table><tr><td>jzehfz</td><td>uhzuifgeizfiyegfizgei</td></tr></table>';
$('.addrow').on('click', function() {
    $('.scrollbox').append(newline);
});

$('.scrollbox').enscroll({
    showOnHover: false,
    verticalTrackClass: 'track4', // Default is .vertical-track
    verticalHandleClass: 'handle4', // Default is .vertical-handle
        minScrollbarLength: 28
});

$('.scrollToBottom').on('click', function() {
    $(".scrollbox").scrollTop($(".scrollbox")[0].scrollHeight);
});