title: Make an element visible only when scrolled down to ***px
body: <p>I am using a Scroll to top button on my website. I am using this Jquery for it </p>
  
  <pre><code>    $(window).scroll(function() {
      if ($(this).scrollTop()) {
          $('#cttm:hidden').stop(true, true).fadeIn();
      } else {
          $('#cttm').stop(true, true).fadeOut();
      }
  });
  
  
    $(document).ready(function(){
        var bottom = ($(window).outerHeight() - $(window).height()) - 150; // 150 pixel to the bottom of the page; 
        $(window).scroll(function(){
            if ($(window).scrollTop() &gt;= bottom ) {
                    $("#cttm").fadeTo("slow",.95);
               } else {
                    $("#cttm").fadeOut("slow");
               }
        });
  
        $("#cttm").click(function(){
            $('html, body').animate({scrollTop:0}, 'slow');
            $("#cttm").fadeOut("slow");
        });
    });
  </code></pre>
  
  <p>This Jquery works great but i want the element to appear only when we scroll to 200px from the top or something like that. Is there any way to do it with JQuery ? </p>