slideToggle의 특정 태그 또는 클래스로 페이지를 스크롤하고 다른 태그 또는 클래스로 스크롤하려면 콜백에서 어떻게 만듭니 까?

Question

내 코드는 다음과 같습니다.

$(".trigger").click(function() { 
    $('.toggleContainer').slideToggle(); 
    $('.trigger').text($(this).text() == 'Show more' ? 'Hide' : 'Show more'); 
    $('.trigger').toggleClass('trigger_alt') 
    $('html, body').animate({ 
     scrollTop: $(".trigger").offset().top 
    }, 800); 
}); 

페이지의 다른 태그로 다시 스크롤하거나 내 경우에는 .trigger 클래스 위에있는 다른 클래스를 으로 스크롤 할 수 있습니다. slideToggle 콜백 예제 (toggleContainer를 토글 할 때 클릭하면 닫힙니다). 나는이 두 번째 스크롤이 콜백에 있어야한다는 것을 알고 있지만, 만약 내가 이렇게한다면 :

 $('html, body').animate({ 
     scrollTop: $(".trigger").offset().top 
    }, 800, function() { 
     $('html, body').animate({ 
      scrollTop: $(".header").offset().top 
     }, 800); 

    }); 

.trigger에 애니메이션을 적용하지 않고 멈추지 않고 .header

Answer 1

두 번째 애니메이션을 .header하는 애니메이션을 멈추지 않고 콜백에. 열기 및 닫기 함수에 click 이벤트를 사용하는 경우 토글의 상태를 확인한 다음 하나의 애니메이션이나 다른 애니메이션을 수행하는 두 가지 방법 중 하나를 사용해야합니다. 다른 옵션은 전체 함수를 두 개의 개별 함수로 분리하고 .trigger 요소의 click 이벤트 대신 toggle 이벤트를 사용하는 것입니다.

Answer 2

var trigger = $('.trigger'); 
var container = $('.container'); 
trigger.toggle(

function() { 
    container.slideDown(); 
    trigger.text($(this).text() == 'Learn more' ? 'Hide' : 'Learn more'); 
    $('html, body').animate({ 
     scrollTop: $(".trigger").offset().top 
    }, 800); 
}, function() { 
    container.slideUp(); 
    trigger.text($(this).text() == 'Learn more' ? 'Hide' : 'Learn more'); 
    $('html, body').animate({ 
     scrollTop: $(".header").offset().top - 20 
    }, 800); 
}); 

나는 내 질문에 대답했다. 누군가가 더 나은 해결책을 가지고 있다면 여기에 게시하십시오.