How to scroll the page when clicking on down arrow using javascript?

Question

An array is having 17 items and I am working on a functionality which needs to display the first 5 items of an array when the page is loaded, then if we click on down arrow then the next 5 items need to show, then for another click need to show the remaining items and similar to up arrow also. How can I achieve this by using only javascript or angularjs. Following is the code which I tried so for.

 var vm = this; vm.dataoptions = [ {title: 'data1', state: 'app.data1'}, {title: 'data2', state: 'app.data2'}, {title: 'data3', state: 'app.data3'}, {title: 'data4', state: 'app.data4'}, {title: 'data5', state: 'app.data5'}, {title: 'data6', state: 'app.data6'}, {title: 'data7', state: 'app.data7'}, {title: 'data8', state: 'app.data8'}, {title: 'data9', state: 'app.data9'}, {title: 'data10', state: 'app.data10'}, {title: 'data11', state: 'app.data11'}, {title: 'data12', state: 'app.data12'}, {title: 'data13', state: 'app.data13'}, {title: 'data14', state: 'app.data14'}, {title: 'data15', state: 'app.data15'}, {title: 'data16', state: 'app.data16'}, {title: 'data17', state: 'app.data17'}, ]; 

 <div class="data-list"> <ul> <li ng-repeat="data in vm.dataoptions"> <a ui-sref="{{data.state}}"> {{data.title}} </a> </li> </ul> </div> <div class="data-buttons"> <button><i class="fa fa-chevron-up" ng-click="up()"></i></button> <button><i class="fa fa-chevron-down" ng-click="down()"></i></button> </div> 

Answer 1

 var myApp = angular.module('myApp',[]); myApp.controller('ctrl', ['$scope', function($scope) { $scope.begin = 0; $scope.dataoptions = [ {title: 'data1', state: 'app.data1'}, {title: 'data2', state: 'app.data2'}, {title: 'data3', state: 'app.data3'}, {title: 'data4', state: 'app.data4'}, {title: 'data5', state: 'app.data5'}, {title: 'data6', state: 'app.data6'}, {title: 'data7', state: 'app.data7'}, {title: 'data8', state: 'app.data8'}, {title: 'data9', state: 'app.data9'}, {title: 'data10', state: 'app.data10'}, {title: 'data11', state: 'app.data11'}, {title: 'data12', state: 'app.data12'}, {title: 'data13', state: 'app.data13'}, {title: 'data14', state: 'app.data14'}, {title: 'data15', state: 'app.data15'}, {title: 'data16', state: 'app.data16'}, {title: 'data17', state: 'app.data17'}, ]; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <div ng-app="myApp" ng-controller="ctrl"> <div class="data-list"> <ul> <li ng-repeat="data in dataoptions | limitTo:5:begin"> <a ui-sref="{{data.state}}"> {{data.title}} </a> </li> </ul> </div> <div class="data-buttons"> {{begin}} <button ng-show="begin>0" ng-click="begin = begin - 5"><i class="fa fa-chevron-down" ></i><</button> <button ng-show="begin<dataoptions.length" ng-click="begin= begin +5"><i class="fa fa-chevron-up" ></i>></button> </div> </div> 

you can do something like that,with limitTo, angular 1.4+ needed