父div滚动到子div位置

Question

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.

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.

Try it here: http://codepen.io/daviddiefenderfer/pen/yOodJd

HTML:

<div id="sidebar">
  Question Type:
  <select>
    <option>Text</option>
    <option>Slider</option>
    <option>Star</option>
  </select>
  <button id="zoom" onclick="getFullView()">Zoom Out</button>
</div>
<div id="artboard">
  <div class="artboard-container">
    <div class="box active">
      Please select question type
      <br>
      <br>
      <input type="text" placeholder="Question Title">
      <div class="answers" >
      </div>
    </div>
  </div>
</div>

CSS:

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;
}

JS:

$(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');
}

Answer 1

If you use position:fixed , top & z-index then the active box will always appear at the top of the screen.

.box.active{
  transition: .6s curve-bezier (0, 1.08, .59, 1);
  transform: scale(1);
  top: 0;
  position: fixed;
  z-index: 1;
  cursor: default;
}

http://codepen.io/anon/pen/jqGOQN