在mouseout上滚动回到框的顶部

Question

请运行此代码段以更好地了解我的问题

body{
  background-color: #E13241;
  font-family: sans-serif;
  font-weight: 300;
}
#wrapper{
  width: 1130px;
  margin: 100px auto;
}

.box1, .box2, .box3, .box4{
  width: 230px;
  height: 200px;
  overflow: hidden;
  float: left;
  word-break: break-all;
  word-spacing: -1px;  
  margin-left: 15px; /* or 0px */
  background-color: rgba(25, 25, 25, 0.2);
  padding: 15px;
 
  transition: all 0.5s ease-in;
}

h3{
  text-align: center;
}

.box1:hover, .box2:hover, .box3:hover, .box4:hover{
  width: 230px;
  height: 300px;
  margin-top: -50px;
  overflow-y: scroll;
}

::-webkit-scrollbar {width: 5px;} 
::-webkit-scrollbar-track {background-color: rgba(25, 25, 25, 0.2);}
::-webkit-scrollbar-thumb {background-color: rgba(25, 25, 25, 0.2);}

<div id="wrapper">
  <div class="box1">
    <h3>
      Title Box 1
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti? 
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
    </p>
  </div>
  <div class="box2">
    <h3>
      Title Box 2
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti? 
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
    </p>
  </div>
  <div class="box3">
    <h3>
      Title Box 3
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti? 
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
    </p>
  </div>
  <div class="box4">
    <h3>
      Title Box 4
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti? 
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
    </p>
  </div>
</div>

因此，我在div中有一个方框。当我将其悬停时，框会变高，并且可以在框内滚动。但是当我不再将鼠标悬停在框上时，我找不到能自动滚动回到框顶部的方法。

我已经尝试了多种方法，包括我在另一个答案中找到的js代码：

$('#box').show();
$('#box').scrollTop(0);
$('html,body, #box').animate({scrollTop: 0}, 100);

但这只是取消我的所有CSS，在这种特定情况下不起作用。

有什么想法或方向可以遵循吗？