Cacher is the code snippet organizer for pro developers

body{
  margin: 0px;
  padding: 0px;
  font-family: Arial;
}

.box{
  
  color:#fff;
  padding:20px;
}
  
#nav{
  position:fixed;
  left: 0px;
  right: 0px;
  margin: 10% auto;
  z-index: 9999;
  width: 100px;
}

#nav a{
  cursor: pointer;
}

#scroller{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  top: 0;
}

.container{
  width: 100%;
  overflow: hidden;
  max-height: 868px;
}

.red { background-color: #B23751; }
.blue { background: rgb(17,123,189) }
.green { background-color: #65B237; }
.pink { background-color: #c0392b; }
.black { background-color: #2c3e50; }

section{ height: 900px;}

.arrow {
 border: solid transparent;
 border-width: 0 0 35px 35px;
  box-shadow: 1px -1px 0 1px #fff inset;
  transition: all .24s ease;
  transform: rotate(-225deg);
  position: absolute;
  padding: 40px;
  text-indent: -99999px;
  height: 0px;
}

.arrow:hover,
.arrow:active {
  box-shadow: 2px -2px 0 2px #fff inset; 
}

.up{ margin-top: -100px; }
.down { transform: rotate(315deg); margin-top: 0%; }

/*
* Credits to 
* http://jsbin.com/evamux/160/edit
*/

var PN = 1;
var PA = $('.box').length;
var Pos = 0;

function checkArrows() {
    if(PN === 1) {
       $("#up_arrow").css({ "display": "none"});
    }else{
       $("#up_arrow").css({ "display": "block"});
       $(".tip").css({ "display": "none"});
    }
    if(PN === PA) {
      $("#down_arrow").css({"display": "none"});
    }else{
       $("#down_arrow").css({"display": "block"});
    }
}
checkArrows();

function goTo(){
   checkArrows();
   Pos = $('.box').eq(PN-1).position().top;
  $('#scroller').stop().animate({top: '-'+Pos}, 500);
}
goTo();


$('#up_arrow').click(function(){
      PN--;
      goTo();
});
$('#down_arrow').click(function(){
      PN++;
      goTo();
});

 

<div id="nav">
   <a id="up_arrow" class="arrow up">UP</a>
   <a id="down_arrow" class="arrow down">DOWN</a>
</div>
 
<div class="container">
  <div id="scroller">
    <section class="blue box"></section>
	 
    <section class="red box"></section>
	
    <section class="green box"></section>
	
    <section class="pink box"></section>
	
    <section class="black box"></section>
  </div>
</div>