jquery - 如何让DIV自动滚动适应屏幕

Question

我有 2 个 DIV(1 和 2)都是 100% 宽度、100% 高度和position:absolute，我想要实现的是当用户查看 DIV 1 并向下滚动约 10% 时，DIV 2自动滚动以适合屏幕。

这是示例代码 https://jsfiddle.net/d6bpr5o2/

<div id="one" class="content">
when user scroll like 10% down. the screen automatically scroll to the next div.
</div>

<div id="two" class="content">
this is second screen
</div>

这是 CSS:

.content{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

#one{
    background:blue;
}

#two{
    top:100%;
    background:rgba(255,255,0,1.00);
}

Answer 1

也许我的代码可以帮到您？ https://jsfiddle.net/moongod101/zbyy7mc5/

$(function(){
    $div1 = $('.div1')
  $div2 = $('.div2')
    $div2Pos = $('.div2').offset().top;
  $time = 0
    $(window).scroll(function(){

    $scrollPos = $(this).scrollTop();
    $to = $div2Pos = 100

    if($scrollPos >= $to){

      if($time == 0){
        //Not scroll before
        $('html, body').animate({
          scrollTop: $div2.offset().top
            }, 2000);
        $time ++
      }

    }


  });

});