title: How can I scroll to a div onClick using React?
body: <p>I have a sticky navigation in this app I'm building using React. What I'm trying to figure out is how can I scroll to that div using an <code>onClick</code>? I'm using the <code>window.scrollTo</code> method. </p>
  
  <p>The divs on the page have corresponding IDs to the anchor tags. </p>
  
  <pre><code>handleClick = e =&gt; {
      this.setState({
          activeSection: e.target.id,
      });
      let sections = document.querySelectorAll('.deal-details__container');
  
      window.scrollTo({
          top: 690,
          behavior: 'smooth',
      });
  };
  </code></pre>
  
  <p>My markup looks like this: </p>
  
  <pre><code>&lt;h6 className="section-header-overview text-center mb-0"&gt;
  &lt;a href="#overview" className={ this.state.activeSection === true ? 'active' : ''} onClick={() =&gt; this.handleClick('overview')}&gt;
      Overview
  &lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is one of the components I need to scroll to: </p>
  
  <pre><code>import React from 'react';
  import { dealType } from '../../../../core/types';
  import SpecsGroup from './SpecsGroup';
  import SpecsTabButton from './SpecsTabButton';
  import { Row, Col, Container } from 'reactstrap';
  import { groupBy, filter, map, toPairs, pipe, prop, zipObj } from 'ramda';
  
  
  
  export default class Specs extends React.PureComponent {
      scrollRef = React.createRef();
  
      static propTypes = {
          deal: dealType.isRequired,
      };
  
      state = {
          activeTab: 'capabilities',
          activeCategory: null,
      };
  
      filterSpecs() {
          const groupByCategories = pipe(
              filter(item =&gt; {
                  if (
                      this.state.activeTab === 'capabilities' &amp;&amp;
                      capabilitiesCategories.includes(item.category)
                  ) {
                      return true;
                  }
  
                  if (
                      this.state.activeTab === 'features' &amp;&amp;
                      featuresCategories.includes(item.category)
                  ) {
                      return true;
                  }
  
                  return false;
              }),
              groupBy(prop('category')),
              toPairs,
              map(zipObj(['category', 'values']))
          );
  
  
      return groupByCategories(this.props.deal.equipment);
  }
  
  toggleActiveTab(tab) {
      if (this.state.activeTab !== tab) {
          this.setState({
              activeTab: tab,
              activeCategory: null,
          });
      }
  }
  
  toggleActiveCategory(category) {
      if (this.state.activeCategory !== category) {
          this.setState({
              activeCategory: category,
          });
      } else {
          this.setState({
              activeCategory: null,
          });
      }
  }
  
  render() {
      if (
          !this.props.deal.equipment ||
          this.props.deal.equipment.length === 0
      ) {
          return false;
      }
  
      return (
          &lt;div className="deal-details__container pt-5 pb-5" id="specs" ref={this.scrollRef}&gt;
              &lt;Container&gt;
                  &lt;Row className="deal__section-heading" noGutters&gt;
                      &lt;Col&gt;
                          &lt;h3 className="text-center"&gt; Specifications &lt;/h3&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;Row className="rounded bg-white shadow-sm" noGutters&gt;
                      &lt;Col&gt;
                          &lt;Row className="deal-details__specs-tabs" noGutters&gt;
                              &lt;SpecsTabButton
                                  isActive={
                                      this.state.activeTab === 'capabilities'
                                  }
                                  label="Capabilities"
                                  value="capabilities"
                                  handleOnClick={this.toggleActiveTab.bind(
                                      this
                                  )}
                              /&gt;
                              &lt;SpecsTabButton
                                  isActive={
                                      this.state.activeTab === 'features'
                                  }
                                  label="Features"
                                  value="features"
                                  handleOnClick={this.toggleActiveTab.bind(
                                      this
                                  )}
                              /&gt;
                          &lt;/Row&gt;
                          &lt;SpecsGroup
                              deal={this.props.deal}
                              category={this.state.activeTab}
                              activeCategory={this.state.activeCategory}
                              specs={this.filterSpecs()}
                              toggleActiveCategory={this.toggleActiveCategory.bind(
                                  this
                              )}
                          /&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container&gt;
          &lt;/div&gt;
      );
  }
   }
  </code></pre>
  
  <p>I'm still learning react and JS in general. So I may be doing this completely wrong. I've read about refs, but not sure if those would be better/worse. </p>
  
  <p>Any and all help is appreciated!</p>