slideToggle上の特定のタグまたはクラスにページをスクロールして、別のタグまたはクラスにスクロールする方法を教えてください。ここ

Question

は私のコードです：

私.headerを ために言うことができますどのように私は.triggerクラスの上にある 別のクラスにページまたは私の場合には戻って別のタグにスクロールすることができます...

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

たとえば、slideToggleコールバック （クリックすると、toggleContainerを元に戻すことができます）。 私は、この第2のスクロールがコールバックでなければならないことを知っているが、私はそれをこのように行う場合：

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

    }); 

それは.triggerするアニメーション化

とすべきではない

Answer 1

秒のアニメーションを.headerするアニメーション化を停止することなくコールバックで開いたり閉じたりする関数にclickイベントを使用している場合は、トグルの状態をチェックしてから、アニメーションを1つまたは別の方法で実行する必要があります。もう1つの選択肢は、関数全体を2つの別々の関数に分割し、.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); 
}); 

私は私の質問に答えました。誰かより良い解決策があれば、ここに投稿してください。