防止跳回屏幕jQuery动画顶部

Question

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

当用户单击向下箭头时，它将从一个“屏幕”滚动到下面的屏幕。 第二个屏幕设置为在开始时不显示任何内容。 这一切都按预期工作，但是，当尝试再次滚动到屏幕顶部时，它会跳转到顶部，而不是平滑地滚动回到顶部。 我还将GSAP补间库用于其他动画。

请参见下面的代码：

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

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

您可以尝试的是滑动块（通过设置其高度的动画而不是滚动）。

Answer 2

当您正确关闭html div标签时，它可以工作吗？

编辑：

我创建了一个小提琴 ，动画效果很好。 您正在删除（显示：无）另一个元素，这会导致页面闪烁/跳转。

function scrollDown(){
  $('html, body').animate({scrollTop: $(window).height()}, 600);
}
function scrollUp(){
  $('html, body').animate({scrollTop: 0}, 600);
}
$('.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})
  });


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

  });

提示：将功能保持在点击处理程序之外。