Как прокрутить к изображению у которого есть класс

$('a').on('click', function(e){ 
  e.preventDefault(); 
   
  if(!$(this).hasClass('active')){      
    $(this).addClass('active') 
      .siblings() 
      .removeClass('active'); 
  } else { 
    $(this).removeClass('active'); 
  } 
   
   
  $('#bx-pager').animate({ 
     scrollLeft: $(this).offset().left 
  }, 1000); 
   
   
});

#bx-pager { 
	border:1px solid #000; 
	height: 120px; 
    width:360px; 
	overflow-x: scroll; 
	overflow-y: hidden; 
	white-space: nowrap;  /* чтобы картинки стояли в одну линию, не переходя на другую строку */ 
	word-wrap: normal;  /* то же для IE */ 
} 
 
a { 
  display: inline-block; 
  border: 1px solid #ccc; 
} 
 
.active {   
  border: 1px solid red; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
   
  <div id="bx-pager"> 
    <a data-slide-index="0" href="" class="active"><img src="http://placehold.it/120x120"/></a> 
    <a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a> 
    <a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a> 
    <a data-slide-index="3" href=""><img src="http://placehold.it/120x120"/></a> 
  </div>

$('a').on('click', function(e){ 
  e.preventDefault(); 
   
  if(!$(this).hasClass('active')){      
    $(this).addClass('active') 
      .siblings() 
      .removeClass('active'); 
  } else { 
    $(this).removeClass('active'); 
  } 
   
   
  $('#bx-pager').animate({ 
     scrollLeft: $(this).offset().left 
  }, 1000); 
   
   
}); 
 
$('#bx-pager').animate({ 
     scrollLeft: $('.active').offset().left 
}, 1000);

#bx-pager { 
	border:1px solid #000; 
	height: 120px; 
    width:360px; 
	overflow-x: scroll; 
	overflow-y: hidden; 
	white-space: nowrap;  /* чтобы картинки стояли в одну линию, не переходя на другую строку */ 
	word-wrap: normal;  /* то же для IE */ 
} 
 
a { 
  display: inline-block; 
  border: 1px solid #ccc; 
} 
 
.active {   
  border: 1px solid red; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
   
  <div id="bx-pager"> 
    <a data-slide-index="0" href="" ><img src="http://placehold.it/120x120"/></a> 
    <a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a> 
    <a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a> 
    <a data-slide-index="3" href="" class="active"><img src="http://placehold.it/120x120"/></a> 
  </div>