scroll to top button in jquery

Question

i have div.triangle on my page at opacity 0
i want it to fade into opacity .95 once the bottom of the page is hit
then after that, i want it to scroll to the top of $(".container") once $(".triangle") is clicked again
i have this so far, i think i've got most of it right other than the event?

  <script type="text/javascript"> $(document).ready(function(){ $(".container").scroll(function(){ var currentPosition = $(document).scrollTop(); var totalHeight = $(document).offsetHeight; var visibleHeight = $(document).clientHeight; if (visibleHeight + currentPosition >= totalHeight){ $(".triangle").fadeTo("slow",.95); } }); $(".triangle").click(function(){ $(".container").animate({scrollTop:0}, 'slow'); $(".triangle").fadeTo("slow",0); }); }); </script> 

Answer 1

try this:

  $(document).ready(function(){
      var bottom = ($(window).outerHeight() - $(window).height()) - 50; // 50 pixel to the bottom of the page; 
      $(window).scroll(function(){
          if ($(window).scrollTop() >= bottom ) {
                  $(".triangle").fadeTo("slow",.95);
             } else {
                  $(".triangle").fadeOut("slow");
             }
      });

      $(".triangle").click(function(){
          $('html, body').animate({scrollTop:0}, 'slow');
          $(".triangle").fadeOut("slow");
      });
  });