title: Vertical scrolling in div animation by changing css top
body: <p>I'm trying to set up horizontal slider. I have div with <code>overflow: hidden</code> and inside I have 16 divs with height of 60px. Parent div has height so you can see only 4 childs at the time.</p>
  
  <p>Now I want to change childs <code>top:</code> css to make them slide up and 4 new come from bottom.</p>
  
  <p>Here's what I've done so far</p>
  
  <pre><code>lastAddedService.getLastAdded()
      .then(function (response) {
          $scope.lastAddedElements = response.data;
  
          var i = 0, g = 0, c = 0, p = 0;
          var k = 1, b = 1, h = 1;
  
          var slider = {
              step: 1,
              positionTop: 0,
              init: function (step) {
                  var that = this;
                  el[0].querySelectorAll('.a').forEach(function (element) {
                      if(step === 1) {
                          if(i &lt; 16) {
                              that.positionTop = i * 60;
                              i++;
                              return angular.element(element).css('top', that.positionTop);
                          }
                      }
                      if(step === 2) {
                          if(i &lt; 4) {
                              that.positionTop = k * 60 * -1;
                              i++; k++;
                              return angular.element(element).css('top', that.positionTop);
                          }
                          if(i &gt;= 4) {
                              k = 0;
                              that.positionTop = g * 60;
                              i++; g++;
                              return angular.element(element).css('top', that.positionTop);
                          }
                      }
                      if(step === 3) {
                          if(i &lt; 8) {
                              that.positionTop = b * 60 * -1;
                              i++; b++;
                              return angular.element(element).css('top', that.positionTop);
                          }
                          if(i &gt;= 8) {
                              that.positionTop = c * 60;
                              i++; c++;
                              return angular.element(element).css('top', that.positionTop);
                          }
                      }
                      if(step === 4) {
                          if(i &lt; 12) {
                              that.positionTop = h * 60 * -1;
                              i++; h++;
                              return angular.element(element).css('top', that.positionTop);
                          }
                          if(i &gt;= 12) {
                              that.positionTop = p * 60;
                              i++; p++;
                              return angular.element(element).css('top', that.positionTop);
                          }
                      }
                  });
              },
              changeSlide: function (step) {
                  this.step = step;
                  this.init(this.step);
              }
          };
  
          $timeout(function () {
              slider.changeSlide(1);
          });
  
          setTimeout(function () {
              setInterval(function () {
                  var q = 1;
                  q++;
                  slider.changeSlide(q);
                  if(q === 4) {
                      q = 1;
                  }
              }, 5000);
          }, 5000);
  
      }, function (err) {
          console.log('error getting last added');
      });
  }
  </code></pre>
  
  <p>So I'm gathering records from backend and then there is this slider object which has logic which I explained above.</p>
  
  <p>Backend call works fine, I did console response and it's 16 records which I display in layout layer later on. Question is mainly about the logic for this sliding object.</p>
  
  <p>I'm using <code>$timeout</code> to start code work because this code is indeed in angularJS directive and NodeList which I get by <code>querySelectorAll</code> would be empty otherwise because it's evaluated after async backend call finish and then DOM is fully loaded. But it's not really relevant to real logic of this script, it's just additional info.</p>
  
  <ul>
  <li>This code looks very bad to me. How I can improve it?</li>
  <li>It's starting to update top after around 20 seconds and 1 div has 960px I don't know why.</li>
  <li>It's not reseting this variables values so it doesn't loop but it increase <code>top</code> further and further.</li>
  </ul>
  
  <p>I add HTML from my directive if anyone want to reproduce issue</p>
  
  <pre><code>&lt;div class="col-lg-8 col-md-8 col-sm-12 col-xs-12"&gt;
      &lt;div class="row u-no-margin"&gt;
          &lt;div class="col-lg-11 col-xs-11"&gt;
              &lt;h2 class="main__heading"&gt;
                  Ostatnio dodane
              &lt;/h2&gt;
              &lt;div class="main__last-added-field"&gt;
                  &lt;div class="main__last-added a" data-ng-repeat="n in lastAddedElements"&gt;
                      &lt;div class="row u-no-margin main__last-added-container"&gt;
                          &lt;div class="col-lg-3 col-md-2 col-sm-2 col-xs-2"&gt;
                              &lt;h4 class="main__last-added-heading"&gt;
                                  {{ n.data.attributes.price }}
                              &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-7 col-xs-8 u-no-padding"&gt;
                              &lt;h4 class="main__last-added-heading u-no-padding"&gt;
                                  {{ n.data.attributes.name }}
                              &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-2 col-xs-2"&gt;
                              &lt;button type="button" class="btn btn__primary"&gt;
                                  Zobacz
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-1 col-xs-1"&gt;
              &lt;div class="main__last-added-dot-container"&gt;
                  &lt;span class="main__last-added-dot main__last-added-dot--active"&gt;&lt;/span&gt;
                  &lt;span class="main__last-added-dot"&gt;&lt;/span&gt;
                  &lt;span class="main__last-added-dot"&gt;&lt;/span&gt;
                  &lt;span class="main__last-added-dot"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS code is within directive <code>link: function</code> and the templateUrl is above HTML code.</p>
  
  <p><hr><hr><hr>
  ** EDIT **
  <hr><hr><hr></p>
  
  <p>I update question I add plunker showing issue and I explain one more, step by step what I want to accomplish.</p>
  
  <ul>
  <li>Step1: all element has <code>top: x</code> css so they are align vertically. I'm using <code>overflow: hidden</code> on parent so you see only 4 and 12 are hidden below like this</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/jE5SH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jE5SH.png" alt="alt"></a></p>
  
  <ul>
  <li><p>Step2 I move first 4 element to <code>top: -x</code> so you don't see first 4 and element 5,6,7,8 take their place so elements 5,6,7,8 now slide to the top and first 4 are hidden.</p></li>
  <li><p>step 3 same as Step2: elements 5,6,7,8 move to negative top and you now see elements 9,10,11,12</p></li>
  <li><p>step 4 same as Step3: elements 9,10,11,12 move to negative top and you now see elements 13,14,15,16</p></li>
  </ul>
  
  <p><a href="https://plnkr.co/edit/Ud2wWoD87WqmSRDy9A4i?p=preview" rel="nofollow noreferrer">here's demo</a></p>
  
  <p>I don't know why but in plunker it doesn't udpate css top of elements at all.</p>