防止跳回屏幕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})

  });

提示：將功能保持在點擊處理程序之外。