Javascript 防止跳回屏幕顶部jQuery动画

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

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

请参阅下面的代码：

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);
    }
  });

.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;
}

CSS

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

.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>

向上的
向下

我猜当您将顶部块设置为

display:block它会立即出现，并向下推动底部块

您可以尝试将块滑入（通过设置块的高度而不是滚动来实现）。
当您正确关闭html div标记时，它是否有效

编辑：

我制作了一个动画，效果很好。您正在删除（display:none）另一个元素，这会导致页面闪烁/跳转

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})

  });

提示：将函数保留在单击处理程序之外
 我想你可能是对的。你会怎么做呢？如果它们是一个固定的高度，你可以使用TweenLite.to（$element，1，{css:{height:'0px'}}）之类的东西用TweenLite为它们的高度设置动画；如果它们是可变高度的，这就有点困难了，但是你可以用max height来做，而不是用max height来做。这是同样的问题。您的动画在JSFIDLE上也不起作用