title: back to top button doesn't hide
body: <p>i am new to jquery. i am making a back to top arrow for my website, i have a problem about hiding the back to top button. It always show and never hide. All i want is to hide the button first and after maybe 90px height it will show again. Please help me with this. </p>
  
  <p>Here is my jquery script from the top of my header: </p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  
      // hide #back-top first
  $("#back-top").hide();
  
  // fade in #back-top
  $(function () {
      $(window).scroll(function () {
      if ($(this).scrollTop() &gt; 90) {
      $('#back-top').fadeIn();
      } else {
      $('#back-top').fadeOut();
      }
      });
  
      // scroll body to 0px on click
      $('#back-top a').click(function () {
      $('body,html').animate({
      scrollTop: 0}, 800);
      return false;
      });
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my back to top HTML :</p>
  
  <pre><code>&lt;a id="back-top" href="#top"&gt;
      &lt;i id="back-topi" class="fa fa-arrow-circle-up"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>my css :</p>
  
  <pre><code>#back-top {
  display: block !important;
  background: none;
  margin: 0;
  position: fixed;
  bottom: 50px;
  right: 45%;
  width: 40px;
  height: 40px;
  z-index: 100;
  text-decoration: none;
  color: #ffffff;
  background-color: rgba(163,15,15,0.4);
  border-radius: 8px !important;
  }
  #back-topi {
    display: block !important;
    font-size: 40px;
  }
  </code></pre>