title: jQuery scrollTop in container on click only works once
body: <p>I'm trying to make a content slider of sorts with the simplest jQuery possible, without a plugin and without assigning ids to each div.</p>
  
  <p>I have a fixed position <code>#container</code> that is 100% width and 45% height of the page and contains 5 divs called <code>.sect</code>. all 5 <code>.sect</code> are 100% width of the container and are also 45% height of the page, which means that 1 <code>.sect</code> would fill the visible portion of <code>#container</code>, when scrolled to.</p>
  
  <p>a div <code>#down</code> outside <code>#container</code> should, on click, make the <code>#container</code> scroll to each of the .<code>sect</code>s. this is my jQuery for it. I set the value of scrollTop to the height of <code>.sect</code> so that #container will scroll the exact height of each sect every time it is clicked. </p>
  
  <pre><code>$('#down').on('click', function(e) {
      e.preventDefault();
      $('#container').animate({ scrollTop:$('.sect').height()  })
  });
  </code></pre>
  
  <p>the first time <code>#down</code> is clicked, <code>#container</code> scrolls from the 1st <code>.sect</code> in view to the 2nd <code>.sect</code> with no problem, but after that, <code>#down</code> doesn't do anything anymore. <a href="https://jsfiddle.net/vq23tku7/8/" rel="nofollow">jsfiddle</a> - the html and css aren't notable, i think. I'm new to jQuery so please explain what i'm missing!</p>