Scroll si élément en dehors d'une div

Bonjour,
j’espère que la question n'a pas déjà été posée, j'ai beaucoup cherché sur google mais je n'ai pas trouvé de solution à mon problème. Je précise que ma pratique du javascript se limite habituellement à utiliser quelques plugins et quelques fonctions simples...

J'ai une div qui a une hauteur donnée avec une liste de liens à l'intérieur et donc une scrollbar car la liste et plus haute que la div
Ces liens sont des miniatures qui affichent l'image correspondante dans une autre div.
Il y a une class (.actif) qui passe automatiquement sur la miniature cliquée ou sur la suivante (ou précédente) si on utilise les flêches du clavier ou du diaporama.Et donc un changement d'état si le lien a la class en question.

Mon problème c'est que je voudrais que le lien ayant la class .actif soit toujours visible, c'est à dire tester après avoir fais passer la class à l'élément suivant, que celui-ci soit visible et que cela scroll automatiquement pour le placer en haut de la div le cas échéant.

J'ai essayé ce code trouvé en fouillant sur le net, cela fonctionne très bien la première fois mais lorsque je continue à faire défiler cela ne re-fonctionne pas.

	function scroll() {	
var scroll = jQuery( ".nano-content" ).scrollTop();
  var win_height = jQuery( window ).height();
  var win= win_height+scroll;
  var elem=jQuery(".actif").offset().top;

  if (win<elem) {
$('.nano-content').animate({scrollTop: $(".actif").offset().top -85}, 'slow'      );
  }	
  
}

Un peu de mon code:

<div id="lecteur">
			<div id="miniatures" class="nano">
				<div class="chocolat-parent nano-content" data-chocolat-title="set title">

 <a class="chocolat-image" href='x' class="actif"><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
<a class="chocolat-image" href='x'><img src="x"></a>
					
				</div>
			</div>
			<div id="projection-global">
				<div id="projection">
				</div>
			</div>
		</div>
		
		<script>$(document).ready(function(){
		
	 

		
    $('.chocolat-parent').Chocolat(
	{ container : '#projection',
	loop : 'true',
	
	
	});
	
var selector = '.chocolat-parent a';

$(selector).on('click', function(){
    $(selector).removeClass('actif');
    $(this).addClass('actif');
});


$('.nano').nanoScroller();
 $('.nano-content').animate({scrollTop: 10000}, 0);
 $('.nano-content').animate({scrollTop: 0},1300, 'easeOutCirc');
  





});</script>

J’espère que tout cela est assez clair...
Merci d'avance à ceux qui pourront m'aider.
Modifié par dlp (09 Jun 2016 - 13:39)