如何使用javascript在单击向下箭头时滚动页面？

一个数组有17个项目，我正在开发一个功能，在加载页面时需要显示数组的前5个项目，如果单击向下箭头，则需要显示下5个项目，然后再次单击需要显示其余项目，类似于向上箭头。如何仅使用javascript或angularjs实现这一点。下面是我尝试使用的代码

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'}，
];



{{data.title}



var myApp=angular.module（'myApp'，[]）；
myApp.controller（'ctrl'，['$scope'，函数（$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'}，
];
}]);



{{data.title}


{{begin}}
感谢您的回复。我使用的是angular 1.6.0，但我仍然只能看到前5个元素，当我单击箭头按钮时无法显示下5个元素。可能是因为在您的代码中，ng click事件是on tag而不是on tag