如何滚动到div并暂停/修复然后恢复滚动？

Question

我仍然是Jquery的新手。我想看看如何让一个元素滚动到DOM中的特定位置并暂停几次滚动旋转。 这是我一直在玩的代码笔 - http://codepen.io/mslfire/pen/dYovBZ

有什么指示从哪里开始？

这里是codepen代码 HTML

<div class="mine">
    <img class="scroll-to-item" src="http://placehold.it/350x150">
</div>

<div class="mine2">
    <div id="test" class="box-outline">pause scroll</div>
</div>

<div class="mine2">
    <div id="test" class="box-outline">pause scroll</div>
</div>

<div class="mine2">
    <div id="test" class="box-outline">pause scroll</div>
</div>

<div class="mine2"></div>

这是css

.scroll-to-item {
  margin: 0 auto;
  position: fixed; // edit
  top: 30%;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}

.mine {
  height: 500px;
  background: grey;
}

.mine2 {
  height: 500px;
  background: lightblue;
}

.box-outline {
  margin: 0 auto;
  position: relative;
  top: 30%;
  left: 0;
  bottom: 0;
  right: 0;
  width: 350px;
  height: 150px;
  border: 5px solid red;
  color: red;
  text-align: center;
  line-height: 150px;
}

这是BASIC我要做的事/ JS

$(document).ready(function() {
    var pause = $('body').css({'overflow': 'hidden'});
    var resume = $('body').css({'overflow': 'scroll'});
    var x = 1200; // where x is the position to scroll to and then'pause'at
    var x2 = x + 1200; // where x2 is the next position to scroll to and then'pause'at
    var scrollRollTimes = 2 + scrollEvent; // where scrollRollTimes is # of times a user scrolls/moves - would be better if could be like a animation in time mil seconds 0.2s ex
    var scrollEvent = $(window).scroll(); // capture event
    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
      ]; //record the place of scroll / dom or does it?

    $(scrollPosition !== x).scroll(function(){
        $(pause).scroll(scrollRollTimes.resume);
    });
    $(scrollPosition !== x2).scroll(function(){
        $(pause).scroll(scrollRollTimes.resume);
    });
});

当.scroll-to-item从开始位于x位置时 - 暂停滚动。暂停＆＃39; scrollRollTimes＆＃39;用户滚动 - 恢复滚动。