title: Animated Scroll to an element with jQuery
body: <p>I have a <code>animated scrollTop</code> with jQuery.</p>
  
  <pre><code>$('.card &gt; a').on('click', function(e) {
      e.preventDefault();
      var page = $(this).attr('href');
  
      $('.scrollable-content').animate( { scrollTop: $(page).offset().top }, 'slow');
  
      return false;
  });
  </code></pre>
  
  <p>My problem, after the first click the others one won't scroll at the right place.</p>
  
  <p>Here's the problem in action:
  <a href="https://jsfiddle.net/n2w8k7dc/" rel="nofollow noreferrer">https://jsfiddle.net/n2w8k7dc/</a></p>
  
  <p>Click SECTION 1 = it's working.<br>
  Click now SECTION 2 = it's not working.</p>
  
  <p>Do you know why ?</p>
  
  <p>Thanks.</p>