title: Multiple ajax requests, how keep user looking at same div when page is scrolling
body: <p>The page has 3 inputs and 3 content areas. If a user enters a value into the last input, then all 3 content areas are updated and become bigger. However 2 of them are above the last input, causing the user to watch the content 'fly' past the screen.</p>
  
  <p>How to keep the user looking at the same input, and then scroll gracefully to the last content area</p>
  
  <p>Fiddle <a href="https://jsfiddle.net/kimit/7L08e0yz/30/" rel="nofollow noreferrer">Here</a>:</p>
  
  <pre><code>&lt;div id="content1"&gt;
    Content 1
  &lt;/div&gt;
  &lt;div id="content2"&gt;
    Content 2
  &lt;/div&gt;
  
  &lt;a href="#" id="videos-link"&gt; CLICK HERE &lt;/a&gt;
  &lt;div id="content3"&gt;
    Content 3
  &lt;/div&gt;
  
  $(document).ready(function() {
    $('#videos-link').click(function(event) {
      event.preventDefault();
  
      $('#content3').html('loading');
  
      $.ajax({
        url: '/echo/js/?js=hello%20world!',
        complete: function(response) {
          var height = (Math.random() * 1000) + 300;
          $('#content1').height(height);
        }
      });
  
      $.ajax({
        url: '/echo/js/?js=hello%20world!',
        complete: function(response) {
          var height = (Math.random() * 1000) + 300;
          $('#content2').delay(200).height(height);
        }
      });
  
      $.ajax({
        url: '/echo/js/?js=hello%20world!',
        complete: function(response) {
          var height = (Math.random() * 1000) + 300;
          $('#content3').html('loading').delay(500).height(height).html('finished loading');
          var offsetTop = jQuery("#content3").offset().top - 10;
          $('html,body').animate({
            scrollTop: offsetTop
          }, 1000);
  
        }
      });
  
  
    });
  
  });
  </code></pre>
  
  <p>In the fiddle, I would like the user to keep looking at the 'a' element, and then scroll gracefully to the content3 div when the ajax request is complete. </p>