title: reactjs sticky nav bar to scroll to a div using window.scrollTo doesn't work
body: <p>I have a nav bar function componenent which passes the name of the link to the parent component through onclick callback and its further passed to the main app component. The app component have an object with the name of the link and associated ref. onclick callback in the app component takes the ref from the object based on the link-name passed to it by the underlying component and invokes a window.scrollTo. window.scrollTo works when you click a link for the first time and when the page scrolls if another link is clicked from the sticky navbar, window doesn't scroll again but rather goes back to (0,0) and from there clicking the same link works.</p>
  
  <p>//Call back in the App component.</p>
  
  <pre><code>manageContent(link){
  
     console.log(this.linksData[link].current)
  
      window.scrollTo({
          top: this.linksData[link].current.offsetTop,
          left: 0,
          behavior: 'smooth'
       })    
  }
  </code></pre>
  
  <p>The above function is passed to Header component</p>
  
  <pre><code>&lt;Header links={data} onclick={this.manageContent} ref={this.headerRef}/&gt;
  </code></pre>
  
  <p>and in the header links are created using a NavLink function component where onClick would return the link-name back.</p>
  
  <p>What i'm doing wrong, why does scrollTo work on second click once the page scroll to the top but not from the middle of the page or from a scrolled location. </p>
  
  <p>I tried other scroll function as well and wierdly only scrollTo scrolls and that to with scrollOptions, scrollToView, moveTo etc didn't work at all.</p>
  
  <p>I printed out the offsetTop in console and triggering window.scrollTo(0,"offsetTop printed in console"), works fine with no issues.</p>
  
  <p>Here is the code.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>class App extends React.Component {
  
    constructor(props){
      super(props);
      this.manageContent = this.manageContent.bind(this)
  
      this.state={}
      this.sectionRef1 = React.createRef();
      this.sectionRef2 = React.createRef();
      this.sectionRef3 = React.createRef();
      this.sectionRef4 = React.createRef();
      this.sectionRef5 = React.createRef();    
      this.headerRef = React.createRef();    
      this.heroRef = React.createRef();
    }
    manageContent(key){
      console.log(key)
      this.setState({key:key});
    }
  
  setActivePage = (key) =&gt; {
      let refList = [this.sectionRef1,this.sectionRef2,this.sectionRef3,this.sectionRef4,this.sectionRef5]
      console.log(key)
      console.log(refList[key].current)
      if (refList[key].current){
          window.scrollTo({behavior: "smooth",top: refList[key].current.offsetTop})
  
      }
  }
  componentDidUpdate(prevProps, prevState) {  
    console.log("comp updated")
    this.setActivePage(this.state.key)
  }
  /*
  componentDidMount(){
    window.addEventListener('scroll', this.scrollListener)
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollListener)
  }    
  */
    render(){     
      return (
        &lt;div className="bp-container-full bp-typography" key="app"&gt;
          &lt;Header links={data.links} onclick={this.manageContent} ref={this.headerRef}/&gt;
          &lt;main key="main"&gt;
              &lt;HeroSection ref={this.heroRef}/&gt;
              &lt;div className="bp-main"&gt;
              &lt;section key="home"className="page" ref={this.sectionRef1}&gt;
                &lt;Home/&gt;
              &lt;/section&gt;
              &lt;section key="aboutme" className="page" ref={this.sectionRef2}&gt;
                &lt;AboutMe/&gt;
              &lt;/section&gt;
              &lt;section key="sitedetails" className="page" ref={this.sectionRef4}&gt;  
                &lt;SiteDetails/&gt;
              &lt;/section&gt;
              &lt;section key="contact" className="page" ref={this.sectionRef5}&gt;  
                &lt;ContactForm/&gt;
              &lt;/section&gt;
              &lt;/div&gt;
          &lt;/main&gt;
          &lt;Footer/&gt;  
        &lt;/div&gt;
      );
    }
  
  }
  export default App;
  </code></pre>
  
  <p><strong>Header.js</strong></p>
  
  <pre><code>class Header extends React.Component {
      constructor(props) {
          super(props);
          console.log(props)
          this.linkRef = React.createRef()
          this.state = {isOpen:false};
          this.headerRef = React.createRef()
      }
  
      render() {      
          const navlink = data.links.map((link,key)=&gt;{ 
              return(
              &lt;a href="#" key={link} ref={this.linkRef}
                      className="nav-list-item bp-upper"
                      onClick={() =&gt; this.props.onclick(key)}&gt;
                    {link}
              &lt;/a&gt;
          )})
          return (
              &lt;header key="header-key" className={classnames("bp-header","bp-header-fixed",
                              {"is-scrolled":this.state.scrolled})} ref={this.headerRef}&gt;
                  &lt;button className={classnames("bp-mobile-menu",{"is-open":this.state.isOpen})} onClick={()=&gt;{this.setState({isOpen:!this.state.isOpen})}}&gt;
                    &lt;i className={classnames("fas", {"fa-bars":!this.state.isOpen, "fa-times":this.state.isOpen})}&gt;&lt;/i&gt;
                  &lt;/button&gt;                            
                  &lt;div className={classnames("nav", "nav-align-centre",{"is-open":this.state.isOpen})}&gt;
                      &lt;nav className="nav-list nav-primary"&gt;
                          {navlink}
                      &lt;/nav&gt;
                  &lt;/div&gt;
              &lt;/header&gt;
          )
      }
  }
  export default Header;
  </code></pre>