title: jQuery scrollable ul via arrow ( and remove arrow when reached top or bottom end of list )
body: <p>see <a href="http://liveweave.com/Pieivc" rel="nofollow">http://liveweave.com/Pieivc</a></p>
  
  <p>what i want that in start there show be no icon for arrow up as not needed but when user click arrow down it appears should appears and when user reaches last itme in ul li list bottom arrow should vanish </p>
  
  <p>how can i do to check it ?..</p>
  
  <pre><code>(function () {
  
    $('#scrollup').on({
      'mousedown touchstart': function() {
        $(".sidebar-menu").animate({scrollTop:  0}, 2000);
      },
      'mouseup touchend': function() {
        $(".sidebar-menu").stop(true);
      }
    });
  
    $('#scrolldown').on({
      'mousedown touchstart': function() {
        $(".sidebar-menu").animate({
          scrollTop:  $(".sidebar-menu")[0].scrollHeight
        }, 2000);
      },
      'mouseup touchend': function() {
        $(".sidebar-menu").stop(true);
      }
  });
  
  })();
  </code></pre>