How to make a scroll with arrows?

Question

I am working on a project for application in touch screen monitor, and I need to do the schematic as the following image.

It will be a list of items, inside a div for example, and it will have to be a scroll with buttons according to the image, where the arrows are, but I have no idea how to do.

Answer 1

You can use the animate jQuery with scrollTop, controlling the scroll of div up or down.

Follow a practical example that you can customize as you wish:

$("#botoes li").on("click", function(){
   var index = $(this).index();
   var lista_top = $("#lista").scrollTop();
   
   // o valor "20" é quanto em pixels irá rolar
   // 150 é o tempo da animação. Quanto maior, mais lenta.
   $("#lista").animate({ scrollTop: lista_top+Number((index == 0 && '-')+20) }, 150);
});

*{
   position: relative;
}

ul, li{
   margin: 0;
   padding: 0;
   list-style: none;
}

#botoes{
   display: inline-block;
   position: fixed;
   top: 10px;
   right: 10px;
   z-index: 9;
}

#botoes li{
   display: block;
   width: 30px;
   height: 30px;
   background-color: #fff;
   border: 2px solid #000;
   border-radius: 10px;
   margin: 1px;
   text-align: center;
}

#botoes li:hover{
   background-color: #ddd;
}

#botoes li:active{
   background-color: #090;
}

#botoes li i{
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  top: 5px;
}

.seta_cima{
   -webkit-transform: rotate(-135deg);  
   transform: rotate(-135deg);
}

.seta_baixo{
   -webkit-transform: rotate(45deg);  
   transform: rotate(45deg);
}

#lista{
   display: block;
   width: 300px;
   height: 200px;
   padding: 15px;
   border: 1px solid #000;
   overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lista">
   <h3>Texto</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a massa et justo ornare porta. Vestibulum non vestibulum diam. Cras sagittis vitae orci in ultrices. Curabitur vulputate, ex sed placerat porta, diam lacus elementum felis, nec iaculis leo nulla et dolor. Proin aliquet, urna sed sodales condimentum, orci quam finibus ex, vitae sagittis metus nisi commodo mauris. In quis leo sodales, auctor nisl ac, rutrum felis. In sed est sollicitudin neque egestas volutpat facilisis ac metus.</p>
   <p>Praesent fringilla blandit velit vel auctor. Proin porta commodo erat a gravida. Nulla id ultrices massa. Quisque eu dui auctor, faucibus lacus vel, tempus diam. Sed sed ultrices massa. Suspendisse pellentesque, est non varius imperdiet, ex neque gravida magna, non vestibulum diam leo sed ligula. Aliquam id quam sed elit sollicitudin consequat id eu ex. In hac habitasse platea dictumst. Etiam rutrum egestas leo id molestie. Mauris volutpat nulla vel interdum fermentum. Pellentesque magna sapien, sollicitudin sed fringilla ut, tincidunt sed massa. Vivamus urna tellus, varius non consequat vel, elementum ut libero.</p>
</div>
<div id="botoes">
   <ul>
      <li><i class="seta_cima"></i></li>
      <li><i class="seta_baixo"></i></li>
   </ul>
</div>