화면 상단으로 돌아 가기 방지 jQuery 애니메이션

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

제 생각에 상단 블록을 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}) 

    }); 

팁 : 기능을 클릭 핸들러 외부에 두십시오.