title: jQuery animate to variable height
body: <p>I want a button above the fold, that says "scroll down!" When clicked. I want it to animate the full browser height down. Since people have different screen resolutions. I want to use a variable. However this is quite impossible.</p>
  
  <p>The code below works, but only with a set height of 800px.</p>
  
  <p>Instead I need it to work with the <code>var hheight</code>.</p>
  
  <p>I've been searching stackoverflow all night with only few leads to follow, and no real solutions.</p>
  
  <p>This is working:</p>
  
  <pre><code>function jqUpdateSize(){
      // Get the dimensions of the viewport
      var width = jQuery(window).width();
      var hheight = jQuery(window).height();
  
      jQuery('#jqWidth').html(width);
      jQuery('#jqHeight').html(hheight);
  };
  jQuery(document).ready(jqUpdateSize);    // When the page first loads
  jQuery(window).resize(jqUpdateSize);     // When the browser changes size
  
  jQuery(document).ready(function() {
      jQuery(".my-btn").click(function(event){
      jQuery('html, body').animate({scrollTop:'+=' + 800 + 'px'}, '800');
      });
  });
  </code></pre>
  
  <p>Following is not working:</p>
  
  <pre><code>jQuery('html, body').animate({scrollTop:'+=' + hheight+ 'px'}, '800');
  </code></pre>
  
  <p>Hope someone, knows how to handle this.</p>