Infinite Animated Vertical Circular Scrolling

Infinite Animated Vertical Circular Scrolling

I have a container that has a dynamically generated table inside and I want the container to have an infinite scrolling animation effect that wraps around and is circular in nature.  I have created a script that does automatically scroll the data in a  somewhat circular pattern, but there is too much of a gap from when it gets out of view at the top and comes back up at the bottom.  How can I modify my code to somehow create a better wrap around effect, where once the data scrolls about halfway through or so, it starts coming back up from the bottom?  Below is what I have so far..  I greatly appreciate any advice!


  1. <html>
    <head>
    <title>Rotate Scroll</title>
    <style>
    .widget
    {
        position: absolute;
        top: 50px;
        left: 50px;
        background-color: orange;
        overflow: hidden;
        width: 200px;
        height: 100px;

    }
    .scrollPanel
    {
        position: relative;
        height: 180px;
        overflow: hidden;
    }
    .data
    {
        position: absolute;
        font-size: 24px;

    }   
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

    $(document).ready(function(){

        rotateScrollWidgetDataTop( $(".widget") );
       
        function rotateScrollWidgetDataTop( _widget )
        {
            var animationDuration        = 5000;
            var scrollableData             = _widget.find( ".data" );
            var destinationTopPosition    = "-" + ( scrollableData.height() + 10 ) + "px";
            var startingBottomPosition    = ( _widget.height() - 5 ) + "px";

            scrollableData.animate(
            {
                "top" : destinationTopPosition
            },
            {
                duration: animationDuration,
               
                complete: function()
                {
                    $( this ).css( "top", startingBottomPosition );
                    rotateScrollWidgetDataTop( _widget );
                }
            });
        }

    });

    </script>
    </head>
    <body>

    <div class="widget">
        <div class="scrollPanel">
            <div class="data">
                        <table class="dataTable">
                        <tbody>
                            <tr>
                                <td>Item1</td>
                            </tr>
                            <tr>
                                <td>Item2</td>
                            </tr>
                            <tr>
                                <td>Item3</td>
                            </tr>
                            <tr>
                                <td>Item4</td>
                            </tr>
                            <tr>
                                <td>Item5</td>
                            </tr>
                            <tr>
                                <td>Item6</td>
                            </tr>
                            <tr>
                                <td>Item7</td>
                            </tr>
                            <tr>
                                <td>Item8</td>
                            </tr>
                        </tbody>
                        </table>
            </div>
        </div>
    </div>
    </body>
    </html>