元素出现后如何滚动到底部（使用react-slidedown）

Question

A bit of a newbie question I'm sure, but I can't figure it out.

I have an optin form that I reveal upon clicking on a link. The reveal is done using react-slidedown .

The problem I have is that if this is on the bottom of the page, the form that slides down is not seen - you have to scroll down to see it. How can I scroll automatically to the bottom of the page after the form slides down?

Here is the codesandbox (scroll to the bottom for the link)

I've been dealing with this for the past two hours, but haven't managed to make it work.

(Note: I'm pretty new at react.)

Answer 1

Add the following to your function "handleToggle":

  setTimeout(() => {
    window.scrollTo(0, document.body.scrollHeight);
  }, 100);

since the update of the state and rendering takes some time, we delay our scrollTo function by 100ms

It should give you the effect that you're looking for... forked codesandbox here