Scroll down/up button when overflow hidden

by Hitesh Trivedi

HTML

<div class="container">
  <div class="content">
    <p>Fisrt</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>last</p>
    <p>string</p>
  </div>
</div>

<a href="#" id="up" hidden>Up</a>
<a href="#" id="down" hidden>down</a>

CSS

.container {
  height: 100px;
  width:200px;
  padding: 0 10px;
  overflow: hidden;
  
}

JavaScript

$(document).ready(function() {
   alert($('.container').height());
  if ($('.content').height() > $('.container').height()) {
    $('#down').show();
    $('.content').css('margin-top', '0px');
    $('#down').click(function() {
      animateContent('down');
    });
    $('#up').click(function() {
      animateContent('up');
    });

  }
});

function animateContent(direction) {
  var animationOffset = 0;
  if (direction == 'down') {
    animationOffset = $('.content').offset().top - $('.container').height();
  $('.content').animate({
    "marginTop": animationOffset + "px"
  },
    if (animationOffset <= ($('.container').height() - $('.content').height())) {
      $('#down').hide();
      $('#up').show();
    }

  } else {
    animationOffset = $('.content').offset().top + $('.container').height();
    if (animationOffset >= 0) {
      $('#up').hide();
      $('#down').show();
    }
  }
 "fast");

}