画面の先頭にジャンプすることを防止するjQueryアニメーション

Question

2つの「画面」に異なる背景画像があります。

ユーザーが下向きの矢印をクリックすると、1つの '画面'から下の矢印にスクロールします。 2番目の画面は、先頭にnoneを表示するように設定されています。これはすべて期待どおりに動作しますが、画面の上部にスクロールしようとすると、スムーズに上にスクロールするのではなく、上にジャンプします。他のアニメーションにも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

トップブロックをdisplay: block;に設定すると、すぐに表示され、ボトムブロックがプッシュダウンされます。

代わりに（ブロックをスクロールせずに高さを動かすことで）ブロックをスライドさせることができます。

Answer 2

html divタグを正しく閉じると機能しますか？

編集：

私はfiddleを作成し、アニメーションが正常に動作します。他の要素を削除（表示：なし）しているため、ページが点滅/ジャンプします。

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

    }); 

ヒント：機能をクリックハンドラーの外に置いてください。