title: Parent div to scroll to child divs position
body: <p>Here's what I'm trying to make happen: 
  User clicks on child div '.box' and when they click it the scaling goes up to full size and the parent div will scroll up or down to fit the child div perfectly. </p>
  
  <p>What's currently happening the parent div doesn't scroll to child div's top position. I've tried offsets for window and parent div and setting scrollTo but I think I may be missing a key component to this function.</p>
  
  <p>Try it here: <a href="http://codepen.io/daviddiefenderfer/pen/yOodJd" rel="nofollow">http://codepen.io/daviddiefenderfer/pen/yOodJd</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
    Question Type:
    &lt;select&gt;
      &lt;option&gt;Text&lt;/option&gt;
      &lt;option&gt;Slider&lt;/option&gt;
      &lt;option&gt;Star&lt;/option&gt;
    &lt;/select&gt;
    &lt;button id="zoom" onclick="getFullView()"&gt;Zoom Out&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="artboard"&gt;
    &lt;div class="artboard-container"&gt;
      &lt;div class="box active"&gt;
        Please select question type
        &lt;br&gt;
        &lt;br&gt;
        &lt;input type="text" placeholder="Question Title"&gt;
        &lt;div class="answers" &gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body, html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  #sidebar{
    padding: 10px;
    box-sizing: border-box;
    width: 15%;
    height: 100%;
    background-color: #ccc;
    float: left;
  }
  #artboard{
    box-sizing: border-box;
    width: 85%;
    height: 100%;
    float: right;
    position:relative;
  }
  .artboard-container{
    position: relative;
    height: 100%;
    width: 100%;
  }
  .box{
    padding: 50px;
    text-align: center;
    float: left;
    background-color: lightblue;
    height: 100%;
    transform: scale(.5);
    transition: transform .6s;
    cursor: pointer;
  }
  .box.active{
    transition: .6s curve-bezier (0, 1.08, .59, 1);
    transform: scale(1);
    position: fixed;
    top: 0;
    z-index: 1;
    cursor: default;
  }
  #zoom{
    position: absolute;
    left: 20px;
    bottom: 30px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
    $('.box').width($('#artboard').width());
  })
  
  $('.box').on('mouseup', function(){
    $(this).addClass('active');
    $('#artboard').css('overflow', 'hidden');
  });
  
  function getFullView(){
    $('.active').removeClass('active');
    $('#artboard').css('overflow', 'scroll');
  }
  </code></pre>