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='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/></p>   
  </div>
  <a class='gauche'><p>
  << 
  </p>  </a>
  <a class='droite'><p>
  >>
  </p>  </a>
  <div class='cible'>
  
  </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=$(document).height() - $(window).height() - $(window).scrollTop();
  //on fixe le top des bouton "gauche droite" a 50% de la hauteur de 			$(window)
 
      if(scrollBottom<=0)
      	{
        	$(".gauche,.droite").css('top',$(".cible").offset().top);
        	console.log("fin de page");
        }
        else
        {
         $(".gauche,.droite").css({
  		'top':$(window).scrollTop()+$(window).height()/2
      });
        }
  });
  
});