Automatically scrolling DIV

A DIV that scrolls automatically, pausing when the mouse is hovered over the container.

by thirdender

HTML

<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum accumsan ante ut aliquam. Nam at dui et nulla gravida dignissim sit amet sed ligula. Proin pulvinar, turpis sit amet varius rutrum, nisl neque pulvinar purus, in imperdiet velit risus quis magna. Vestibulum in ante velit, eu blandit nunc. Suspendisse at iaculis turpis. Morbi mattis suscipit scelerisque. Donec justo sapien, placerat non adipiscing vitae, feugiat dapibus quam. Maecenas fringilla augue sit amet quam aliquet non laoreet ante molestie. Maecenas lectus arcu, sollicitudin non lacinia tempus, ornare a magna. Nunc diam diam, condimentum nec ultrices ac, euismod a nisl. Vivamus mi nisi, vulputate vel fringilla in, gravida eu orci. Maecenas dignissim placerat lobortis. Mauris a mi dolor, id facilisis elit. Donec malesuada, nisl et tempor scelerisque, dolor enim placerat nulla, pulvinar dapibus neque enim sit amet erat.
</p>
<p>
Curabitur vulputate dolor ac nibh ultrices non mollis ipsum suscipit. Donec a dui volutpat libero vehicula placerat semper eu dui. Nulla mauris nulla, imperdiet vel sagittis et, commodo at erat. Curabitur sit amet arcu et nulla sollicitudin malesuada vel nec arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit nulla, dignissim pharetra sollicitudin vel, tincidunt quis nulla. Pellentesque tempor, lorem ut porttitor adipiscing, lacus velit tempor augue, non congue orci purus a magna. Phasellus dui sapien, condimentum in consectetur et, malesuada et risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat.
</p>
<p>
Duis at malesuada ipsum. Integer sapien arcu, varius in consequat eu, adipiscing sit amet diam. Aliquam velit quam, volutpat sed mattis quis, elementum ut lectus. Curabitur sagittis semper urna et tincidunt. Quisque in risus nec lacus mattis dignissim. Nullam bibendum molestie justo sed consectetur. Ut eget nisi magna. Donec lorem nunc, placerat...

CSS

body {
    margin: 20px;
    background: #e7e7e7;
    font: 12px Arial, "Helvetica Neue", Helvetica, sans-serif;
}

p {
    margin: .8em 0;
}

#lipsum {
    background: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
    border-radius: 4px;
    padding: .2em 1em;
    height: 200px;
    overflow: auto;4
}

JavaScript

jQuery(function($) {
    var container = $("#lipsum"),
        height = container[0].scrollHeight;
    function start() {
        container.
          delay(500).
          animate(
            {
              "scrollTop": height - container.height()
            },
            (height - container.scrollTop()) * 20,
            "linear",
            function() {
                setTimeout(function() {
                    container.scrollTop(0);
                    start();
                }, 4000);
            }
          );
    }
    container.hover(function() {
        container.stop(true, false);
    }, start);
    start();
});