title: Scroll to element in React
body: <p>I have a ref on all the large section headers on a page. The page is very long and renders well passed <code>100vh</code>. The section that is scrollable is a fairly nested div, also with a ref. Given the refs of the section headers, and the ref of the inner container (can't use <code>window.scrollTo</code> etc.) how can would I build a "on click, go to section".</p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;
      &lt;button onClick={ // navigate to section }&gt;Navigate&lt;/button&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div ref="inner_content"&gt;
        &lt;h2 ref="section1"&gt;Section 1&lt;/h2&gt;
        &lt;h2 ref="section2"&gt;Section 2&lt;/h2&gt;
        &lt;h2 ref="section3"&gt;Section 3&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  // on navigate, I've tried things like this which have made the page scroll, but I can't understand which scroll/height properties I would need to access to pinpoint where the view should scroll too
  this.refs.inner_content.scrollTop(this.refs.section1.getBoundingClientRect().top)
  </code></pre>
  
  <p>I have been unable to find a consistent way to do this using <code>scrollTop</code> and <code>getBoundingClientRects().top</code> on the section refs.</p>