Self Scroll

by Kevin Mwangi

HTML

<button onclick="start_scroll_down();">Start Scroll</button>


<div id="top">
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div class="topInner">top</div>
  <div...

CSS

#top {
  background:#fff;
  border: 1px solid black;
  padding:10px;
}

.topInner:nth-child(odd) {
  background:lightblue;
  height: 50px;
 }
 
 .topInner:nth-child(even) {
  background:lightpink;
  height: 50px;
 }


#bottom {
  background:green;
  border: 1px solid red;
   height: 30000px;
}

JavaScript

function start_scroll_down() {
  scroll = setInterval(function() {
    window.scrollBy(0, 1000);
    console.log('start');
  }, 1500);
}

function stop_scroll_down() {
  clearInterval(scroll);
  console.log('stop');
}