title: jQuery animate height in percentage scrolls to the top
body: <p>I'm using jQuery's <code>animate()</code> to change the height of a div:</p>
  
  <pre><code>$(this).animate({
    height: '60%'
  });
  </code></pre>
  
  <p>The problem is that it automatically scrolls to the top of the div, which I don't want to happen. I've also noticed that this does not happen when I specify a height in pixels <code>height: '400px'</code>, but I really need a percentage here.</p>
  
  <p>Live example : <a href="http://jsfiddle.net/vdcqgjyn/3/" rel="nofollow noreferrer">http://jsfiddle.net/vdcqgjyn/3/</a></p>
  
  <p>How can I prevent my div from scrolling to the top automatically? 
  Thanks</p>
  
  <hr>
  
  <p>EDIT (05/16/19)</p>
  
  <p>I haven't found a proper solution yet, but a simple trick instead, using the fact a value in pixels will work:</p>
  
  <pre><code>let h = Math.round( $(this).parent().innerHeight() * 60/100 );
  $(this).animate({
    height: h+'px'
  });
  </code></pre>
  
  <p>This trick won't work in the live example, cause you need to have a parent with a fixed height.</p>
  
  <p>Still curious to know whether this can be solved a cleaner way!</p>