JSFiddle - React, Tailwind, and code Playground

HTML

<div class='conteneur'>
  <div class='premier'>
  <p>c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element</p>    
  </div>
  <div class='deuxieme'>
  <p>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/></p>  
  </div>
  <div class='troisieme'>
    <p>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/></p>    
  </div>
  <div class='cible'>CIBLE</div>
  <div class='quatrieme'>
  <p>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/></p>   
  </div>
  <a class='gauche'><p>
  << 
  </p>  </a>
  <a class='droite'><p>
  >>
  </p>  </a>
  
  </div>
</div>

CSS

.conteneur{text-align:center;padding:5em;}
.conteneur > div{vertical-align:medium;}
.premier{background-color:Red;}
.deuxieme{background-color:blue;}
.troisieme{background-color:yellow;}
.quatrieme{background-color:green;}
.gauche,.droite{position:absolute;top:50%;text-align:center;vertical-align:medium;
                width:50px;height:50px;
                color:white;background-color:black}
.gauche{left:0;border-radius:0 25px 25px 0}
.droite{right:0;border-radius:25px 0 0 25px}
.gauche:hover,.droite:hover{cursor:pointer;background-color:blue;}

JavaScript

$(document).ready(function(){ 
	
 
  $(window).scroll(function(){
 		var scrollBottom=parseInt($(document).height() - 
    $(window).height() - 		$(window).scrollTop()),
 		fenetre=$(window),
 		scrollTop=fenetre.scrollTop(),
 		cible=$(".cible"),
 		Button=$(".gauche").offset(),
    
    //set le Top selon le scroll de window  
 		Top=fenetre.height()/2+fenetre.scrollTop()+cible.height()<cible.offset().top
 			? fenetre.scrollTop()+fenetre.height()/2
      : cible.offset().top;
 	
  $(".gauche,.droite").css('top',Top);
  
  // si le debut de la page
  if(scrollTop==0){
  console.log("debut de page");
  }
  
  //si la fin de la page
  if(scrollBottom==0){
  console.log("fin de page");
  }
        
        
  });
  
});