title: Animate with a negative scrollTop/scrollLeft value
body: <p>I have 4 sections surrounding the absolute positioned section and need to be able to click the list items to animate to them. This works fine for two of sections but for the section with a left: -100 and the right: -300 doesn't animate. Is there a way to make scrollTop and Left work with a negative value?</p>
  
  <p><a href="https://jsfiddle.net/oLzppt3o/" rel="nofollow">DEMO</a></p>
  
  <pre><code>$('#hilolink').click(function() {
      $('body, html').animate({
          scrollLeft: $('#hiLo').offset().left
      }, 500);
  });
  $('.hiloback').click(function() {
      $('body, html').animate({
          scrollLeft: $('#allGames').offset().left
      }, 500);
  });
  $('#simonSays').click(function() {
      $('body, html').animate({
          scrollTop: $('#simon').offset().top
      }, 500);
  });
  $('.simonback').click(function() {
      $('body, html').animate({
          scrollTop: $('#allGames').offset().top
      }, 500);
  });
  $('#rock').click(function() {
      $('body, html').animate({
          scrollTop: $('#rockPaper').offset().top
      }, 500);
  });
  $('.rockback').click(function() {
      $('body, html').animate({
          scrollTop: $('#allGames').offset().top
      }, 500);
  });
  $('#dance').click(function() {
      $('body, html').animate({
          scrollLeft: $('#danceDance').offset().left
      }, 500);
  });
  $('.rockback').click(function() {
      $('body, html').animate({
          scrollLeft: $('#allGames').offset().left
      }, 500);
  });
  </code></pre>