title: How to scroll to the bottom of div after clicking on button x times?
body: <p>I'm making a panel which allows scrolling. Also, I have a button, I want to scroll the panel content to the bottom after clicking on the button 5 times <em>(5 x 20% of <code>scrollHeight</code> value)</em>.</p>
  
  <p>I'm checking with the logging value, it's correct but indeed, the panel content has already scrolled to the bottom when clicking on the button 4th.</p>
  
  <p>And the 5th, <code>value</code> is updated but the panel content won't scroll anymore.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').on('click', function () {
    var $panel = $('.panel');
    var scrollHeight = $panel.prop('scrollHeight');
    var value = $panel.scrollTop() + scrollHeight * 0.2;
    
    console.log(scrollHeight + ' - ' + value);
    
    $panel.animate({ scrollTop: value }, 500);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel {
    height: 100px;
    border: 1px solid;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  .panel div {
    height: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="panel"&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button type="button"&gt;Scroll&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>