JQuery .animate scrollTop fails to scroll TV presentation

Question

I've been trying to scroll a long/large with JQuery .animate. But I'm not getting ANY movement. I'm including the html of divs and output before and after .animate.

Any help would be greatly appreciated.

<div id="content" style="height: 868px;">
    This height: is calculated and placed here by jquery onready function.
    It is hight of window - Header - Footer.
<div id="content_row" style="height:inherit overflow:hidden;">
<div id="scroll_me" style="width:100%; height:auto; margin-left:auto; margin-right:auto; margin-top:0.8rem;">


function downScroll() {
    ...
    // Debug info of variables done here!
    console.log( "my_scroll_container: "        + my_scroll_container );
    console.log( "my_container_height: "        + $(my_scroll_container).height() );
    console.log( "my_scroll_selector: "         + my_scroll_selector );
    console.log( "my_scroll_selector_height: "  + $(my_scroll_selector).height() );
    console.log( "myPos: "                      + $(my_scroll_selector).scrollTop() );
    console.log( "max_scroll: "                 +  max_scroll_distance );
    console.log( "swing_time: "                 + swing_time );

    $(my_scroll_selector)
        .stop(true, false)
        .animate( { scrollTop: max_scroll_distance },
                    swing_time,
                    'swing',
                    function() {
                        //$(my_scroll_selector).trigger( 'up.startScroll' );
                    } );
}


 JUST BEFORE ANIMATE
 my_scroll_container: #content_row
 my_container_height: 984
 my_scroll_selector: #scroll_me
 my_scroll_selector_height: 1587.2
 myPos: 0                                // Expected postion, just loaded page.
 max_scroll: 603
 swing_time: 3000
  
 ANIMATION FINISHED:
 my_scroll_container: #content_row
 my_container_height: 984
 my_scroll_selector: #scroll_me
 my_scroll_selector_height: 1587.2
 myPos: 0                                // This did not change here or on screen!
 max_scroll: 603 
 swing_time: 3000 
                    

Answer 1

Well, I finally figured it out! I should have been obvious to me... I was applying the animation to the div that was the "data"

The animation should be applied to the div specifying the "view port" that is smaller than the data!

        $(my_scroll_container)
            .stop(true, false)
            .animate({scrollTop: max_scroll_distance },
                     swing_time,
                     'swing',
                     function () {
                         $(my_scroll_selector).trigger('up.startScroll');
                     });