title: Scroll to the bottom of a scrollable div in react
body: <p>I've tried numerous solutions to try scroll to the bottom of a div as at the bottom user feedback can be found on whether their registration form successfully submitted.</p>
  <pre class="lang-js prettyprint-override"><code>var objDiv = document.getElementById(&quot;form&quot;);
  objDiv.scrollTop = objDiv.scrollHeight;
  </code></pre>
  <p>and</p>
  <pre class="lang-js prettyprint-override"><code>window.scrollTo(0,document.body.scrollHeight);
  </code></pre>
  <p>and</p>
  <pre class="lang-js prettyprint-override"><code>window.scrollTo(0,document.querySelector(&quot;#form&quot;).scrollHeight);
  </code></pre>
  <p>With no success</p>
  <p>Here's the react code for the form</p>
  <pre><code>return (
      &lt;div
        className={styles.register_container}
        id=&quot;register-container&quot;
        style={{
          height: &quot;100%&quot;,
          overflow: &quot;scroll&quot;,
        }}
      &gt;
        &lt;HomeIcon /&gt;
        &lt;div className={styles.login_button_container}&gt;
          &lt;p&gt;Already have an account? &lt;/p&gt;
          &lt;button
            onClick={() =&gt; {
              router.push(&quot;/login&quot;);
            }}
          &gt;
            Log in
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div
          style={{
            padding: &quot;60px 0&quot;,
            height: &quot;100%&quot;,
            maxWidth: &quot;300px&quot;,
            display: &quot;flex&quot;,
            flexDirection: &quot;column&quot;,
            alignItems: &quot;center&quot;,
          }}
          id=&quot;form&quot;
        &gt;
          &lt;img
            src=&quot;/assets/Logo/ROA_logowhite.png&quot;
            style={{
              height: &quot;100px&quot;,
              maxWidth: &quot;100px&quot;,
            }}
            onClick={() =&gt; {
              var objDiv = document.getElementById(&quot;form&quot;);
              objDiv.scrollTop = objDiv.scrollHeight;
            }}
          /&gt;
          {page === 2 &amp;&amp; (
            &lt;div style={{ width: &quot;100%&quot; }}&gt;
              &lt;button className=&quot;back-button&quot; onClick={backButtonHandler}&gt;
                &lt;FontAwesomeIcon icon={faAngleLeft} /&gt;
                Back
              &lt;/button&gt;
            &lt;/div&gt;
          )}
          {page === 1 &amp;&amp; loginDetails}
          {page === 2 &amp;&amp; personalDetails}
  
          &lt;div style={{ width: &quot;100%&quot;, padding: &quot;5px 0&quot; }}&gt;
            &lt;button
              className=&quot;form-button&quot;
              onClick={buttonHandler}
              style={{ minHeight: &quot;50px&quot; }}
            &gt;
              {submitButton}
            &lt;/button&gt;
          &lt;/div&gt;
          {loading &amp;&amp; (
            &lt;div
              style={{
                padding: &quot;5px&quot;,
                width: &quot;100%&quot;,
                display: &quot;flex&quot;,
                justifyContent: &quot;center&quot;,
                alignItems: &quot;center&quot;,
              }}
            &gt;
              &lt;ReactLoading
                type=&quot;spin&quot;
                color=&quot;#1dd760&quot;
                height={50}
                width={50}
                id=&quot;loader&quot;
              /&gt;
            &lt;/div&gt;
          )}
  
          {registrationError &amp;&amp; (
            &lt;p className=&quot;form-submit-error&quot;&gt;
              Registration error, refresh your page and try again
            &lt;/p&gt;
          )}
          {true &amp;&amp; (
            &lt;div&gt;
              &lt;p
                style={{ marginBottom: &quot;10px&quot; }}
                className=&quot;form-submit&quot;
                id=&quot;submit&quot;
              &gt;
                Redirecting to login ... You should receive a welcome email, if
                not please try registering again or visit the{&quot; &quot;}
                &lt;a href=&quot;/contact&quot; style={{ color: &quot;#1dd760&quot; }}&gt;
                  contact
                &lt;/a&gt;{&quot; &quot;}
                page.
              &lt;/p&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  </code></pre>
  <p>I can't directly focus on the submit success message as setState is asynchronous in react. Just need a function that allows me to scroll the bottom of the div when the next/submit button is clicked</p>
  <p><a href="https://i.stack.imgur.com/HTZ4L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HTZ4L.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/l8nCc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8nCc.png" alt="enter image description here" /></a></p>