title: Scroll Back To Top Button Not Working in React.js
body: <p>I am working on a React based project and try to implement a button in the footer for click to scroll top but facing an issue which I can not resolve yet. If you want to see the code please click to the below gist link.</p>
  
  <pre><code>// GoTop.js
  
  import React from 'react';
  
  const GoTopd = (props) =&gt; {
  
      const [intervalId, setIntervalId] = React.useState(0);
      const [thePosition, setThePosition] = React.useState(false);
  
      React.useEffect(() =&gt; {
          document.addEventListener("scroll", () =&gt; {
              if (window.scrollY &gt; 170) {
                  setThePosition(true)
              } else {
                  setThePosition(false);
              }
          });
          // window.scrollTo(0, 0);
      }, [])
  
      const onScrollStep = () =&gt; {
          if (window.pageYOffset === 0){
              clearInterval(intervalId);
          }
          window.scroll(0, window.pageYOffset - props.scrollStepInPx);
      }
  
      const scrollToTop = () =&gt; {
          const intervalId = setInterval(onScrollStep, props.delayInMs);
          setIntervalId(intervalId);
      }
  
      const renderGoTopIcon = () =&gt; {
          return (
              &lt;div className={`go-top ${thePosition ? 'active' : ''}`} onClick={scrollToTop}&gt;
                  &lt;i className="arrow alternate circle up outline icon"&gt;&lt;/i&gt;
              &lt;/div&gt;
          )
      }
  
      return (
          &lt;React.Fragment&gt;
              {renderGoTopIcon()}
          &lt;/React.Fragment&gt;
      )
  }
  
  export default GoTopd;
  </code></pre>
  
  <p>And <code>import</code> that component on footer like below:</p>
  
  <pre><code>&lt;GoTop scrollStepInPx="100" delayInMs="10.50" /&gt;
  </code></pre>
  
  <p>The issue is with this code like when the first load and go to below of that page it's working fine but after that, I can't go down to the page need to refresh again. I don't understand the issue of why it's behaviors like this.</p>
  
  <p>Can anyone please figure out what is an issue?</p>
  
  <p>I appreciate your help, please.</p>
  
  <p>Thanks</p>