jQuery - SmoothScroll

A partial jQuery plugin. The plugin doesn't inject any HTML or inline styling; it relies on an external stylesheet for styling.

by emgee

HTML

<div class="wwsmoothscroll-container-header">
    <div class="title">
        <h4>Stuff To Display</h4>    
    </div>
</div>
<div id="testContainer1" class="wwsmoothscroll-container">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>
    <div class="scroller-left button"></div>
    <div class="scroller-right button"></div>
</div>

<div class="wwsmoothscroll-container-header">
    <div class="title">
        <h4> More Stuff TO Display - Container Set To Autoscroll (mouse-over to pause)</h4>    
    </div>
</div>
<div id="testContainer2" class="wwsmoothscroll-container">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>
    <div class="scroller-left button"></div>
    <div class="scroller-right button"></div>
</div>

CSS

body {
    width:90%;
    max-width:960px;
    margin:0 auto;
    font-family: Arial, sans-serif;
    font-size:12px;
}
.button {
    cursor: pointer;
}
.wwsmoothscroll-container-header>.title {
    color:#fff;
    display:table;
    width:100%;
    background-color:#49166d;
    border-radius:0.45em 0.45em 0 0;
    margin-bottom:0.5em;
}
.wwsmoothscroll-container-header>.title>h4 {
    display:table-cell;
    vertical-align:middle;
    padding:1em 0.5em 1em 1em;
}

.wwsmoothscroll-container {
    position:relative;
    z-index:0;
    display:block;
    margin-top:1.5em;
}
.wwsmoothscroll-container>ul {
    z-index:1;
    list-style-type:none;
    margin:0;
    padding:0;
    white-space:nowrap;
    overflow:hidden;
}
.wwsmoothscroll-container>ul>li {
    display:inline-block;
    margin:1px 0 0 1em;
    padding:0;
    width:15em;
    height:16em;
    border:1px solid #49166d;
}
.wwsmoothscroll-container>ul>li:last-child {
    margin-right:1em;
}
.wwsmoothscroll-container>ul>li:nth-child(odd){
    background-color:#ff0;
}
.wwsmoothscroll-container>ul>li:nth-child(5){
    background-color:#f00;
}
.wwsmoothscroll-container .scroller-left {
    position:absolute;
    display:none;
    background: url("http://s13.postimg.org/3nxonol3b/scroll_left.png") no-repeat bottom;
    bottom:0;
    left:0;
    z-index:2;
    width:3em;
    height:17em;
}
.wwsmoothscroll-container .scroller-right {
    position:absolute;
    display:none;
    background: url("http://s23.postimg.org/4j0kpfeiz/scroll_right.png") no-repeat bottom;
    bottom:0;
    right:0;
    z-index:2;
    width:3em;
    height:17em;
}
.wwsmoothscroll-container .scroller-left:hover {
    background: url("http://s23.postimg.org/jvowx732j/scroll_left_hover.png") no-repeat bottom;
}
.wwsmoothscroll-container .scroller-right:hover {
    background: url("http://s23.postimg.org/qnfc01s23/scroll_right_hover.png") no-repeat bottom;
}

#testContainer1
{
    margin-bottom:1.5em;
}

JavaScript

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                if (typeof $(this).data("wwSmoothScroll") === "undefined") {
                    // create a new instance of the plugin
                    var plugin = new $.wwSmoothScroll(this, options);
                    // store a reference to the plugin object
                    $(this).data("wwSmoothScroll", plugin);
                }
            });
        },
        scrollRight: function () {
            return this.each(function () {
                var plugin = $(this).data("wwSmoothScroll");
                if (typeof plugin !== "undefined")
                    plugin.scrollRight();
                else
                    $.error("wwSmoothScroll plugin has not been initialized for this object!");
            });
        },
        scrollLeft: function () {
            return this.each(function () {
                var plugin = $(this).data("wwSmoothScroll");
                if (typeof plugin !== "undefined")
                    return plugin.scrollLeft();
                else
                    $.error("wwSmoothScroll plugin has not been initialized for this object!");
            });
        },
        scrollStop: function () {
            return this.each(function () {
                var plugin = $(this).data("wwSmoothScroll");

                if (typeof plugin !== "undefined")
                    return plugin.scrollStop();
                else
                    $.error("wwSmoothScroll plugin has not been initialized for this object!");
            });
        }
    };

    $.wwSmoothScroll = function (element, options) {
        var continuousScrollTimer, // holds timer for continuous scroll functionality
            $container,
            $content,
            $btnLeftScroll,
            $btnRightScroll,
            plugin = this, // used to reference the current instance of the object
            defaults = {
              ...