如何自动向下滚动div

Question

I have a main div and it contains number of sub divs. Each sub div contain a sentence and By using setInterval() function I changed the sub div background color.(It just like selecting a sentence for a short time)As main div height is smaller than number of sub divs' height, all sentences can't show at once in main div. So I set scroll property to main div.

Suppose main div height can show only 5 sentences.Then, when we run the code we can see that 5 sentences are changed background color one by one, but we can't see whether the other sentences changed their background color or not without scroll the div.

I need to show changed background color div always. That means div must be automatically scroll and show the changed background color div. Can anyone please tell me how to auto scroll div according to my need?

My code:

 var rootNo=1; document.getElementById(rootNo.toString()).style.backgroundColor = '#00BFFF'; var interval = setInterval(function() { document.getElementById(rootNo.toString()).style.backgroundColor = '#FFFF99'; rootNo++; document.getElementById(rootNo.toString()).style.backgroundColor = '#00BFFF'; if(rootNo==30){ clearInterval(interval); } }, 1000);

 .mainDiv{ width: 50%; height: 1%; overflow-y: scroll; background-color: '#FFFF99'; } .subDiv{ width: 100%; height: 10%; background-color: '#FFFF99'; }

 <div class="mainDiv"> <div class="subDiv" id="1">sentence 1</div> <div class="subDiv" id="2">sentence 2</div> <div class="subDiv" id="3">sentence 3</div> <div class="subDiv" id="4">sentence 4</div> <div class="subDiv" id="5">sentence 5</div> <div class="subDiv" id="6">sentence 6</div> <div class="subDiv" id="7">sentence 7</div> <div class="subDiv" id="8">sentence 8</div> <div class="subDiv" id="9">sentence 9</div> <div class="subDiv" id="10">sentence 10</div> <div class="subDiv" id="11">sentence 11</div> <div class="subDiv" id="12">sentence 12</div> <div class="subDiv" id="13">sentence 13</div> <div class="subDiv" id="14">sentence 14</div> <div class="subDiv" id="15">sentence 15</div> <div class="subDiv" id="16">sentence 16</div> <div class="subDiv" id="17">sentence 17</div> <div class="subDiv" id="18">sentence 18</div> <div class="subDiv" id="19">sentence 19</div> <div class="subDiv" id="20">sentence 20</div> <div class="subDiv" id="21">sentence 21</div> <div class="subDiv" id="22">sentence 22</div> <div class="subDiv" id="23">sentence 23</div> <div class="subDiv" id="24">sentence 24</div> <div class="subDiv" id="25">sentence 25</div> <div class="subDiv" id="26">sentence 26</div> <div class="subDiv" id="27">sentence 27</div> <div class="subDiv" id="28">sentence 28</div> <div class="subDiv" id="29">sentence 29</div> <div class="subDiv" id="30">sentence 30</div> </div>

Answer 1

Check this:

https://jsbin.com/qilorebizo

I have modified your js:

var rootNo=1;
document.getElementById(rootNo.toString()).style.backgroundColor = '#00BFFF';
var mainDiv = document.getElementsByClassName('mainDiv')[0];

function getSubDivPos(id) {
  var pos = 0;
  var iNode;
  for(var i = 0; i < mainDiv.children.length; i++) {
    iNode = mainDiv.children[i];
    if(iNode.id == id){
      break;
    }
    pos += iNode.clientHeight;
  }
  return pos;
}

var interval = setInterval(function() {
    var currentNode = document.getElementById(rootNo.toString());
    currentNode.style.backgroundColor = '#FFFF99';
    rootNo++;
    var nextNode = document.getElementById(rootNo.toString());
    nextNode.style.backgroundColor = '#00BFFF'; 

    if(rootNo==30){
       clearInterval(interval);
    }

    mainDiv.scrollTop = getSubDivPos(rootNo);
}, 1000);

Answer 2

You can scroll-down or top like below:

 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

 <div id="top">Some things here</div> .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here ..<a href="#top">TOP</a>

Fiddle Note: for some reason it's dont work correctly in stackoverflow snippets but in jsfiddle work correctly.