JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
    <a href="#" id="down">Down</a>
    <a href="#" id="up">Up</a>
    <a href="#" id="left">Left</a>
    <a href="#" id="right">Right</a>
    <div id="box_wrapper">    
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>
    </div>
    </div>
</body>

CSS

*{margin:0; height:100%;}




#wrapper{height:100%; background:#000; overflow:hidden;}

.box{height:100%; width:75%; margin:0 auto; position:relative;}


#box1{background:#fff;}
#box2{background:red;}
#box3{background:blue;}


#down{color:#fff; position:absolute;}
#up{color:#fff; position:absolute; top:20px;}
#left{color:#fff; position:absolute; top:40px;}
#right{color:#fff; position:absolute; top:60px;}

JavaScript

$(function () {
  var box = $('.box');
  TriggerClick = 0;
  
  $("#down").click(function(){
     var height = $('.box').outerHeight();
     
     if(TriggerClick == 0){
         TriggerClick = 1;
         $(box).stop().animate({top:'-='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 2;
         $(box).stop().animate({top:'-='+height}, 500);
     }
  });
  
   $("#up").click(function(){
     var height = $('.box').outerHeight();
         
     if(TriggerClick == 2){
         TriggerClick = 1;
         $(box).stop().animate({top:'+='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 0;
         $(box).stop().animate({top:'+='+height}, 500);
     }
  });
  
  $("#left").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'-='+height}, 500);
     }
  });
  
   $("#right").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'+='+height}, 500);
     }
  });
  
});