title: How can I add a scroll to top animation to each closed accordion tab in React?
body: <p>I want to make an accordion where when you click to close the accordtion (its open by default), the main closed accordion is scrolled to the top of the page, making it to the top of the page and the next open accordion is the focial point. So far, I can get the accordion to close and scroll to the top, but all of them do it too, so it just scrolls all the way down to the bottom of the page. </p>
  
  <p>An Example: <a href="https://imgur.com/a/eaE5rnn" rel="nofollow noreferrer">Here</a>  </p>
  
  <p>What I've done so far: <a href="https://imgur.com/a/RdvH90y" rel="nofollow noreferrer">Here</a></p>
  
  <p>I've tried react-scroll-to-component, scroll-to and a few others</p>
  
  <pre><code>scrollToTop = () =&gt; {
      let scroller = scrollToComponent(this.index, {
        offset: 0,
        align: "top",
        duration: 1000,
        ease: "inExpo"
      });
  
      scroller.on("end", () =&gt; console.log("Scrolling End!"));
    };
    render() {
      return (
        &lt;div className='news'&gt;
          {this.state.news.map((newbie, index) =&gt; {
            return (
              &lt;div key={index} className='news_info' id={`news_info-${index}`}&gt;
                &lt;Accordion defaultActiveKey={index}&gt;
                  &lt;Card&gt;
                    &lt;Card.Header&gt;
                      &lt;p&gt;{newbie.title}&lt;/p&gt;
                      &lt;Accordion.Toggle
                        as={Button}
                        variant='link'
                        eventKey={index}
                        onClick={this.scrollToTop}
                      &gt;
                        +
                      &lt;/Accordion.Toggle&gt;
                    &lt;/Card.Header&gt;
                    &lt;Accordion.Collapse
                      eventKey={index}
                      ref={section =&gt; {
                        this.index = section;
                      }}
                    &gt;
                      &lt;Card.Body&gt;
                        &lt;img src={newbie.image} /&gt;
                        &lt;p&gt;{newbie.details}&lt;/p&gt;
                      &lt;/Card.Body&gt;
                    &lt;/Accordion.Collapse&gt;
                  &lt;/Card&gt;
                &lt;/Accordion&gt;
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
  } 
  
  </code></pre>