title: Responsive Scroll on top Button
body: <p>I trying to create a scroll on top button. Its working as intended. However, when i resize the browser screen its keep shifting its place. Following is my CSS code: </p>
  
  <pre><code>#myBtn {
      display: none;
      position: fixed;
      bottom: 100px;
      right: 27px; 
      z-index: 99; 
      border: none; 
      outline: none; 
      background-color: $primary-color;
      cursor: pointer; 
      padding: 10px; 
      border-radius: 10px; 
      &amp;:hover {
        opacity: 0.8;
      }
  }
  </code></pre>
  
  <p>Here is the Javascript code which i am using for the functionality of the button: </p>
  
  <pre><code>// When user scrolls down 920px from the top of the document, show the button
      window.onscroll = function() {
          scrollFunction()
      };
  
      function scrollFunction() {
          if (document.body.scrollTop &gt; 920 || document.documentElement.scrollTop &gt; 920) {
              document.getElementById("myBtn").style.display = "block";
          } else {
              document.getElementById("myBtn").style.display = "none";
          }
      }
  
      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
          document.body.scrollTop = 0; // For Safari
          document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Ojb2N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ojb2N.png" alt="Problem area screen shot"></a></p>