title: How to make scroll to top button appear after scrolling
body: <p>This is how I include the button in the body:</p>
  <pre><code>&lt;?php require_once('scrollToTop.php'); ?&gt;
  </code></pre>
  <hr />
  <p>This is my scroll tTo Top.php file:</p>
  <pre><code>&lt;div class=&quot;btnScrollToTop&quot; data-scroll=&quot;up&quot; type=&quot;button&quot;&gt;
  &lt;img src=&quot;images/paudie_scroll_top_icon.jpg&quot; alt=&quot;&quot;&gt;
  </code></pre>
  
  <hr />
  <p>This is the CSS for the button:</p>
  <pre><code>.btnScrollToTop {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 50px;
      width: 50px;
      border: none;
      z-index: 99;
  }
  </code></pre>
  <hr />
  <p>This is my js file included in php footer as:</p>
  <pre><code>&lt;script src=&quot;js/scroll.js&quot;&gt;&lt;/script&gt;
  
  // JavaScript Document    
  const btnScrollToTop = document.querySelector(&quot;.btnScrollToTop&quot;);
  
  btnScrollToTop.addEventListener(&quot;click&quot;, function() {
      window.scrollTo({
          top: 0,
          left: 0,
          behavior: &quot;smooth&quot;
          });
          
      });
  </code></pre>
  <hr />
  <p>I am unable after a variety of attempts to get he button to appear only one the use has scroll 20px from the top of page.</p>
  <p>Please help.</p>