title: How to scroll the page when clicking on down arrow using javascript?
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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'},
              ];</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="data-list"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="data in vm.dataoptions"&gt;
              &lt;a ui-sref="{{data.state}}"&gt;
                  {{data.title}}                
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="data-buttons"&gt;
  &lt;button&gt;&lt;i class="fa fa-chevron-up" ng-click="up()"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;button&gt;&lt;i class="fa fa-chevron-down" ng-click="down()"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>