javascript - 防止跳回到屏幕顶部 jQuery animate

Question

我有两个背景图片不同的“屏幕”。

当用户点击向下箭头时，它会从一个“屏幕”滚动到下一个“屏幕”。第二屏一开始设置为不显示。这一切都按预期工作，但是，当尝试再次滚动到屏幕顶部时，它会跳到顶部，而不是平滑地滚动回顶部。我也在使用 GSAPs tween library用于其他动画。

请看下面的代码:

JS

 $('.down-arrow').click(function() {
    var tl = new TimelineMax();
    tl.set('.background-two', {display: 'block', onComplete: scrollDown})
    tl.set('.background-one', {display: 'none', delay: 0.6})

    function scrollDown(){
          $('html, body').animate({scrollTop: $(window).height()}, 600);
    }

  });


  $('.up-arrow').click(function() {
    var tl = new TimelineMax();
    tl.set('.background-one', {display: 'block', onComplete: scrollUp})
    tl.set('.background-two', {display: 'none', delay: 0.6})
    function scrollUp(){
          $('html, body').animate({scrollTop: 0}, 600);
    }
  });

CSS

.background-one {
    background: url(../img/Background1.png) no-repeat center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
}

.background-two {
    background: url(../img/Background2.png) no-repeat center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
}

HTML

<div class="background-one">
   <div class="up-arrow">UP</div>
</div>
<div class="background-two">
   <div class="down-arrow">DOWN</div>
</div>

Answer 1

我的猜测是，当您将顶部 block 设置为 display: block; 时，它会立即出现并向下推底部 block 。

您可以尝试将方 block 滑入(通过设置它们的高度动画而不是滚动)。