Animate jQuery not working as expected

Question

I have a FB feed in a web page

When I press the Prev and Next buttons, the next and previous news feeds are displayed. But I would like to use the animate function when scrolling. I have tried to use this lines of code:

 $('html, body').stop().animate({ 
   scrollTop: $scrollItems.eq(currentFbDiv).offset().top
 }, 200);

but it not works as expected. Can you please guide me how can I use in my example? Thanks

<script>
jQuery(document).ready(function($){
  var pagePositon = 0,
    sectionsSeclector = $(".cff-item"),
    $scrollItems = $(sectionsSeclector),
    offsetTolorence = 20,
    fbDivHeights = [],
    result = [],
    currentFbDiv = 0,
    $fbDivWrapper = $('#cff'),
    pageMaxPosition = $scrollItems.length-1;
   
  sectionsSeclector.each(function(index, item) {    
    var sum = fbDivHeights.reduce(function(a, b) { return a + b; }, 0);
    fbDivHeights.push( $(item).outerHeight()); 
    result = fbDivHeights.map((s => a => s += a)(0));      
  });   
    
  //Map the sections:
  $scrollItems.each(function(index,ele) { 
    $(ele).attr("debog",index).data("pos",index); 
  });

  // Bind to scroll
  $(window).bind('scroll',upPos);

  //Move on click:
  $('#facebook_ticker_controls a').click(function(e){
    //alert("aaa");
    if ($(this).hasClass('next') && currentFbDiv < pageMaxPosition) {
      currentFbDiv++;           
      $fbDivWrapper.css('margin-top', -result[currentFbDiv-1]); 

      /* pagePositon++;*/
      $('html, body').stop().animate({ 
        scrollTop: $scrollItems.eq(currentFbDiv).offset().top
      }, 200);
    }
    if ($(this).hasClass('prev') && currentFbDiv!= 0 && currentFbDiv <= pageMaxPosition) {
           
      if(currentFbDiv == 1) {
        $fbDivWrapper.css('margin-top', '0px');
      } else {
        currentFbDiv--;
        $fbDivWrapper.css('margin-top', -result[currentFbDiv-1]);
      }
            
      /*$('html, body').stop().animate({ 
        scrollTop: $scrollItems.eq(pagePositon).offset().top
      }, 300);
      return false;*/
    }
    return false;
  });

  //Update position func:
  function upPos(){
    var fromTop = $(this).scrollTop();
    var $cur = null;
    $scrollItems.each(function(index,ele){
      if ($(ele).offset().top < fromTop + offsetTolorence) 
        $cur = $(ele);
    });
    if ($cur != null && pagePositon != $cur.data('pos')) {
      pagePositon = $cur.data('pos');
    }                   
  }
}); 

</script>

<div class="tab-content">
  <div class="tab-pane active fade in">
    <ul class="list-unstyled" id="facebook_ticker">
      <?php echo do_shortcode("[custom-facebook-feed]"); ?> 
    </ul>
  </div>
  <div id="facebook_ticker_controls" class="ticker-controls">
    <div style="position: absolute; z-index: 1000; background-color: rgba(0,0,0,.7); height: 35px; width: 350px;">
      <a href="#" class="prev pull-left" id="fprev"><span class="glyphicon glyphicon-chevron-down"></span>&nbsp; Previous</a> 
      <a href="#" class="next pull-right" id="fnext">Next &nbsp;<span class="glyphicon glyphicon-chevron-up"></span></a> 
    </div>
  </div>
</div><!-- end tab-content -->