JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.script-tutorials.com/demos/35/js/imtech_pager.js"></script>
<script src="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css">
<div class="example">
  <h3><a href="#">Paragraph pagination sample</a></h3>
  <div class="scroll_container">
    <div id="content">
      <div class="z">Sergey LUKYANENKO - The Boy and the Darkness - Chapter 1. The Sun Kitten.</div>
      <div class="z">Everything happened because I got ill.</div>
      <div class="z">It was already two in the afternoon, and I was lying in bed flicking through "Peter Pan" - I must have read it a hundred times over. I had long since pulled off the bandage my mother had tied around my neck in the morning, and thrown it into a corner. I simply can't understand - how can cotton wool soaked in vodka possibly help a cough? I don't argue with my mum, of course, but after she leaves I look after myself in my own way - namely, lie in bed with a book and wait for my germs to get tired of such a boring method of passing time. It usually helps - perhaps not at once, but after a day or three. A good thing, really, that the street outside looked quite miserable - the sun poking out for brief moments, only to make room for a patchy, nasty drizzle. Though, the sun never actually peeked into the room - our house is so unfortunately placed that it is in the shadows of the new nine-floor high-rises on every side. "The only use for such a flat is to grow mushrooms", - dad used to say, back when he still lived with us.</div>
      <div class="z">I put my book down on the floor next to the bed, and lay on my back. Perhaps, had I shut my eyes now, nothing would have happened. But there I was, lying staring at the ceiling and listening to the ticking of the clock in the hallway.</div>
      <div class="z">And a speck of sunlight jumped into...

CSS

body {
    background:#eee;
    font-family:Verdana, Helvetica, Arial, sans-serif;
    margin:0;
    padding:0
}
.example {
    background:#FFF;
    width:1000px;
    font-size:80%;
    border:1px #000 solid;
    margin:0.5em 10% 0.5em;
    padding:1em 2em 2em;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}
#content p {
    text-indent:20px;
    text-align:justify;
}
#pagingControls ul {
    display:inline;
    padding-left:0.5em
}
#pagingControls li {
    display:inline;
    padding:0 0.5em
}
.scroll_container {
  overflow: auto;
  max-height: 100px;
}

JavaScript

var pager = new Imtech.Pager();
$(document).ready(function() {
    pager.paragraphsPerPage = 5; // set amount elements per page
    pager.pagingContainer = $('#content'); // set of main container
    pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
    pager.showPage(1);
});

$(window).load(function(){
    $(".scroll_container").mCustomScrollbar({
    moveDragger:true
    });
});



$(".popup-left-content ul li").on("click", function(e){
    e.preventDefault();
    var id= $j(this).attr('data-href');
    $j(".popup-right-content .popupAnimation").each(function(){
      if($j(this).attr('id') == id){
      var moveTop = Math.abs(parseInt($j('.popup-right-content').offset().top) - parseInt($j('#'+id).offset().top));
      console.log(id +"  "+ moveTop);
      $j('.popup-right-content').mCustomScrollbar("scrollTo", moveTop,{
          moveDragger:true
      });
        
      }
    });
  });