title: Element.getBoundClientRect.top not working correctly
body: <p>I am trying to make a search and navigate system. The code seems to work however, it is not able to navigate to all the search patterns. This is mainly because Element.getBoundClientRect().top is returning the wrong value.</p>
  
  <p>I don't know what is wrong with the implementation.</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 clickCounter = -1;
  
  function nextFunction() {
    clickCounter += 1;
    var elements = document.querySelectorAll("#test1");
    var temp = elements[clickCounter].getBoundingClientRect().top;
    alert(temp);
    window.scrollTo(0, temp);
  }
  
  function previousFunction() {
    clickCounter -= 1;
    var elements = document.querySelectorAll("#test1");
    var temp = elements[clickCounter].getBoundingClientRect().top;
    alert(temp);
    window.scrollTo(0, temp);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;mark id="test1"&gt;This is line2&lt;/mark&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;mark id="test1"&gt;This is line4&lt;/mark&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;mark id="test1"&gt;This is line5&lt;/mark&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line6&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line6&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line6&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line6&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line6&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line6&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;This is line6&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous" onclick="previousFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next" onclick="nextFunction()"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;mark id="test1"&gt;This is line6&lt;/mark&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>